Full Width Menu Background

[Gia Watkins]

I wanted to add a full width color band at the top of the page for the menu. This way the menu items will be visible no matter what the colors of the photo image behind it. All I could figure out was to add a background to the menu links via CSS. Is there a fix for this?

[Bill Robbins]

Hi Gia,

You can customize the theme that way. Add this to the Custom CSS that’s in the advanced section of the customizer:

#header-content {
	height: auto;
}

#header,
.hero #header {
	background-color: #fff;
	position: relative;
}

That would change the header to have a white background. It would also move the hero area down below the header so it won’t be covering up part to the image.

You might consider taking the Bonnie’s Greatest Estate Sales logo out of the hero images and instead insert it into the hero title as a logo. That would keep the logo from getting cropped potentially depending on screen size. Just a thought.

Let me know if you have any questions,
Bill

[Gia Watkins]

Thank you, Bill. I know have a full width menu bar which is what we wanted! However, the bar is not flush top with the page, there is a band of grey. Can we remove that? And, make the depth of the menu bar narrower?

Thanks!
Gia

[Bill Robbins]

The bar may be from being logged in with the admin bar present. Try adding this to your custom CSS:

.hero.admin-bar #header {
	top: 0;
}

You can make the header a bit smaller too. Add this to the Custom CSS as well:

nav#primary-site-navigation {
	margin-top: 0;
}

If you need to make it smaller than that, you can reduce the top and bottom padding of the menu items with this:

.sf-menu a {
	padding-top: .75em;
	padding-bottom: .75em;
}

The default is .75em so feel free to change that if you need to.

Also I did notice a change or two inside the style.css file. It’s perfectly fine to make changes there, just be aware that the theme won’t be able to be updated if changes are made inside it. They would be overwritten by the update. If you have a small number of css changes you can use the Custom CSS box. Just copy the style there from the style.css file and edit it there. If you have lots of changes then I would go with a child theme.

Hope that helps out. Have a great week,
Bill

[Gia Watkins]

Yes that helps! At your suggestion I am now trying to put the logo into the header through the customizer. The logo is getting very small. Is there a way to make the logo area wider so that it doesn’t get so small?

http://bonniesestatesales.com/?page_id=169

Thank you for the help!

gia

[Gia Watkins]

Never mind…figured it out myself, I think… Thanks! Gia

[Bill Robbins]

Glad you’re sorted out. If you have questions, let me know.

Bill

[Author]

Posts