Primary/Secondary Navigation full screen width

Community Forums Forums Design Tips and Tricks Primary/Secondary Navigation full screen width

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  Ronald 2 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #29902

    Ronald
    Participant

    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.

    #29918

    Riavon
    Participant

    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

    #29946

    Ronald
    Participant

    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….)

    #29948

    Riavon
    Participant

    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

    #29956

    Ronald
    Participant

    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)

    #29963

    Riavon
    Participant

    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

    #29983

    Ronald
    Participant

    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!

    #29984

    Riavon
    Participant

    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

    #29989

    Ronald
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.