Way to dynamically change header layout?

Sorry, I’ve been away. But your site is looking OK. Still trying to fix it?

Not sure if they fixed it, but I’d like to move my menu and social media icons to the left and clean out the excess space so that the menu bar only fits my icons. Help… please?

Start with this:

.navbar {
	/* Adjust the minimum width of the Navbar	*/
min-width: 		50%;
	/* Adjust the maximum width of the Navbar	*/
max-width: 		50%;
}

and adjust the max-width of the Navbar to what you want. This should drag the Tagline to the left. There are no Social Icons showing to see where you’re trying to move them?

Ah, I see where the confusion is. I used one of your other posts to hide my tagline so it’s just my social icons and the menu bar in there. And… I lied–I was wanting them both far right. I’d like to get the social icons to be where the tagline originally was, and then both it and the menu to be aligned right right.

Thank you for helping!!

Wished I could see where the confusion is as I’m still confused ??

On the current link, I can see:
Social Icons: No
Tagline: Yes, right-aligned
Menu: Yes, left-aligned

You seem to be asking for:
Social Icons: Yes, right-aligned
Tagline: No
Menu: Yes, right-aligned

In that case, adjust CSS to:

Show the Social icons:
You must have a display:none; set against .social-block? Remove it.

Remove Tagline:

.navbar-wrapper .navbar h2 {
  display: none;
}

Then set the Navbar as required above.

Come back after that so I can see what you need to finish off.

Would it help to show you what I’m working with and what my inspiration is? ??

I’m trying to transfer a site I built with Weebly (talk about beginner, am I right?!) to WordPress and mimic the same bar.

The original site is ChelseaRobinsonRealEstate.com
The WordPress site I’m working on is temp.ChelseaRobinsonRealEstate.com

I’d like to try to figure out how to get everything right aligned inside the menu box. Does that make any sense?

Social icons:

.navbar-inner .social-block {
  float: right;
  margin: 10px -300px 10px 0px;
  padding: 0 20px;
}

Menu:

.navbar .nav {
  float: right;
}

Getting close I think!

Hmmm… Close, but a little too far I think.

I published the temp site, so you could see. The menu is spot on, but the social icons are half way out of the box. Thoughts?

Not on my widescreen (1936×1066). But try adjusting the -300px above until it looks right.

For social icons to float right you need to replace the line

margin: 10px -300px 10px 0px;

in rdell’s code with

margin: 10px -30px 10px 0px;

and add:

.social-block a {
float: right;
}

However, it will reverse their order.

You might also want to add

.round-div {border-color: white;}

to your custom CSS so the featured pages icons below the slider don’t show up in light grey squares.