Header background color different than body background color

[Oscar Lutteroth]

My question is in regards to the background color for the header.

Using the “Styling” tab in my WordPress admin, I set the “Custom Background” for the whole site to white. However, I would like the header background color to be black. I added a line to the #header CSS (background-color: black;) but this only changed the 960px of the header.

How can I apply black as the background color for the entire header?

Thanks in advance for your help.

[Bill Robbins]

Oscar,

Thank you for your business first of all. Great question too. In the original version of the theme, the header is only 960 pixels wide so if you change the color of the header to something different from the body background color, the header color won’t span the full width.

But you can make the header span the full width of the site and also change it’s color. To do that, place this snippet in the Custom CSS box that’s in the Styling tab of the Theme Options page:

#header {
	width: 100%;
	box-sizing: border-box;
	background-color: #000000;
	padding-right: 2%;
	padding-left: 2%;
}

That will make the header full-width with just a bit of padding on either side and it’ll set the color to black.

The 1.1 version that we released a few weeks, changes the header so that’s now full-width. You’re welcome to update to that version if you’d like to by downloading it from the downloads section here. One thing to note about the new version, the home page is made entirely of widgets so it’s setup is a bit different.

Let me know if you have any questions or trouble,
Bill

[Oscar Lutteroth]

Thanks Bill, that did the trick. I’ll take a look at the 1.1 version as well.

One other question, now that the header background is black I also set the dropdown menu background to black. It looks great but there is a thin white stroke around the entire dropdown, not sure where this can be edited.

Link to screenshot: http://imgur.com/t5E1VRH

[Bill Robbins]

Glad that helped out. You can change the border of the drop-down menu too. Go to the Styling tab of the theme options page. Scroll down to the Custom CSS box and paste this:

#header .menu li ul {
	border: 1px solid #000000;
}

Save your changes and that will set the border to black. You can change the color code to something else to pick a different border color.

Let me know if you need any help,
Bill

[Author]

Posts