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 1 year, 7 months ago.

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

    Ronald
    Participant
    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.

    #29918

    Riavon
    Participant
    Post count: 95

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

    #29948

    Riavon
    Participant
    Post count: 95

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

    #29963

    Riavon
    Participant
    Post count: 95

    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?

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


    Twitter: @riavonentprises

    #29983

    Ronald
    Participant
    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!

    #29984

    Riavon
    Participant
    Post count: 95

    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
    Post count: 4

    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.