Change the Header Width

[glen hearnden]

Want to change the header ‘width’, to approx 70%, so it does not go full width of page. (running from just to left of logo block and right of menu bar). Got it transparent behind the logo and menu, but want to slim down width if possible.

Is there a snippet of CSS you can give to do this, that I can add into Custom CSS box?

Have gone through forum as hate to think its asking for repeat info, but not found this specifically.

Thanks in advance – your site and theme is great – your support is amazing – thanks.

[Bill Robbins]

Hello Glen,

I appreciate your business. Good question too. You can change the width of the header. There are two boxes that make up the header. There is one called #header that spans the full width of the browser window. There is another one inside it called #header-content. It’s smaller and centered in the middle of the browser window. It contains the logo and navigation bar. Here’s how you can adjust it’s width:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header-content {
   	width: 70%;
   }
   
   @media only screen and (min-width: 1024px) and (max-width: 1200px) {
   
   	#header-content {
   		width: 70%;
   	}
   
   }
   

3. Update your settings.

Let me know if that doesn’t get you to where you’re wanting to go.

Thanks,
Bill

[glen hearnden]

Nope – afraid not quite there with this one!

This code doesn’t seem to affect in anyway??

Attached screen shot with markers for what we want to achieve, just the opaque panel behind logo and menu to be adjusted to less than full width of page, but still behind logo and menu…any ideas?

Thanks in advance.

link to drafting site:

[Bill Robbins]

Thank you for sending over the link. That helped out tremendously. When you mentioned making the header transparent, I was picturing it being completely clear and it was just a matter of adjusting the width of the content area. Seeing it now, I understand what you’re shooting for. Remove all of this:

body.gallery #header {
	background-color: rgba(0, 0, 0, 0.5);
}


body.image #header {
	background-color: rgba(0, 0, 0, 0.5);
}


#header-content {
	width: 70%;
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {

	#header-content {
		width: 70%;
	}

#header-content {
	padding-left: 30px;
	padding-right: 30px;
	background-color: rgba(0,0,0,0.5);
}

See if that doesn’t get to where you want to go. You can adjust the padding on the left and right to change the amount of background that appears on either side of the logo and menu.

Bill

[glen hearnden]

Hi,

Sounds like a great fix and it does resize the width either end as you would hope, but this code makes the ‘depth’ of the header opaque bar reduce, want to keep same depth if possible… sure this is simple, but your coded snippets are invaluable in getting it right. Thanks in advance.

[Bill Robbins]

Good Morning Glen,

We can likely change that. When you say depth, what specifically do you mean? Let me know and we’ll go from there.

Thanks,
Bill

[glen hearnden]

Sorry had my 3D head on!

The height seems to adjust down to approx half height when I use your latest code snippet… width adjusts and looks great, but the height shrinks too! which is not good. Screen snap attached to show reduced opacity area with new CSS code.

Hope that is clearer.

Attachments:

1. 

   Screen-Shot-2014-08-22-at-13.38.jpg
   

[Bill Robbins]

The content area of the header has a height of 70 pixels set. You can remove that if you’d like to and let the size of the logo image dictate the size of the header. This CSS snippet should do that for you:

#header-content {
	height: auto;
}

Let me know how that goes,
Bill

[glen hearnden]

I think we are getting there – this now does what is needed with the header block, but affects the menu drop down. It is pushed down out of reach from the main menu, if you try to reach it, it disappears before you can get mouse over!
Screen shot attached.
Any ideas or have I worn you out on a Friday! Thanks

Attachments:

1. 

   Screen-Shot-2014-08-22-at-15.33.jpg
   

[Bill Robbins]

Almost there. The trouble with drop-downs is one of the reasons the header has a fixed height. When it varies the placement of the drop-down has to be changed in order to remain workable. See if this won’t do the trick:

nav#top-menu ul li:hover ul {
	margin-top: -80px;
}

If you change your logo height, you’ll need to adjust that margin to keep the drop downs in position.

Let me know if you need anything else,
Bill

[glen hearnden]

Resolution gratefully received – seems to look fine now. Thanks again for your help and patience.

[Bill Robbins]

Anytime Glen. Have a gret day!

[Author]

Posts