Primary/Secondary Navigation full screen width

[RonaldMember Post count: 4]

Hi,

I would like my navigation menu to be full screen width and not have any white space left and right. What would have to be done in CSS to accomplish that? I’m using the Balance theme. The website is here:

http://www.japanseacupunctuur.com

Any help would be great. Thanks.

[RiavonParticipant Post count: 89]

Find this in your theme’s stylesheet

.menu-primary, .menu-secondary {
background: url(“images/gray-texture.jpg”) repeat scroll 0 0 transparent;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
}

And change it to:

.menu-primary, .menu-secondary {
background: transparent none;
border:none;
}

Then just apply the styles to the 100% width div block that holds that menu by adding this to your stylesheet:

#nav {
background: url(images/gray-texture.jpg) repeat scroll 0 0 transparent;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;

---

Twitter: @riavonentprises

[RonaldMember Post count: 4]

Thank you very much for replying Riavon. Very new at this so could you give me more hints on where to add the last part? (#nav….)

[RiavonParticipant Post count: 89]

You can add it anywhere you want to in your child theme (Balance) stylesheet style.css. Do you know how to access your stylesheet?

---

Twitter: @riavonentprises

[RonaldMember Post count: 4]

Yes, that I know. Unfortunately the addition of the #nav part does not show the background and borders in the menu. (also added } after the suggested code)

[RiavonParticipant Post count: 89]

Hi Ronald, I see that in my hurry to post, I didn’t get that closing bracket included in my copy/paste – apologies. Good catch.

I just checked your site again, and I do not see (using Firebug) that you’ve added #nav to your stylesheet. Did you add it then remove it?

#nav {
 background: url(images/gray-texture.jpg) repeat scroll 0 0 transparent;
 border-bottom: 1px solid #DDDDDD;
 border-top: 1px solid #DDDDDD; } 

---

Twitter: @riavonentprises

[RonaldMember Post count: 4]

Hi Riavon,

Really odd, but tried it on my test environment and nothing happened. Now tried it on the live site so you can have a look and it worked! Adjusted the margins and it looks pretty much like I wanted it to look.

Thanks a lot!

[RiavonParticipant Post count: 89]

Hooray! Glad it worked for you. Like you, I prefer a full-width navigation bar, so I do that customization to almost every site I build.

---

Twitter: @riavonentprises

[RonaldMember Post count: 4]

Very glad we have the same preference! Couldn’t have figured this out myself.

[Author]

Posts