Menu Background

Community Forums Forums Design Tips and Tricks Menu Background

This topic is: not resolved

Tagged: ,

This topic contains 5 replies, has 2 voices, and was last updated by  Jon Bellah 1 year, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #11143

    rbrown08
    Participant
    Post count: 39

    I’m having a couple of problems configuring my css to make my navigation bar the way I need and I hope someone can help me out or point me in the right direction:

    I want the bar to extend the entire length of the site.  If I change the wrap width to 100% and the header width to 100% then each  page’s content floats to the left of the screen and is no longer centered on the page.
    My menu highlight image isn’t working properly and I think it must be a transparency issue, but I don’t know what code I need to fix to make it appear the way it should.  The green image is actually longer than it is appearing on the site and fades towards the bottom.

    The site where you can see how the menu should look is:  http://lanadil.com

    My WP development site is:  http://lanadil.evibedesigns.com

     


    #11242

    rbrown08
    Participant
    Post count: 39

    Looks like I figured out the correct CSS settings for my menu highlight.  I still need guidance on making my nav bar extend the entire width of the page without affecting the alignment of the inner elements.


    #11372

    rbrown08
    Participant
    Post count: 39

    This is probably such a simple answer, but I still can’t find out how to make it happen:

    How can I get the navigation menu to extend the length of the page?


    #11461

    Jon Bellah
    Participant
    Post count: 109

    This is a bit of a tricky one, because it requires a lot of different changes to your CSS. But here are the changes you want to make:

    Add this to your body.home class.

    [css]
    body.home {
    margin:0;
    }
    [/css]

    Remove the width line from #wrap so it reads as:

    [css]
    #wrap {
    margin: 0 auto;
    }
    [/css]

    #header should read as follows:

    [css]
    #header {
    width: 990px;
    height: 50px;
    margin: 0 auto;
    }
    [/css]

    Add the following to your stylesheet in the Navigation section:

    [css]
    #nav .wrap {
    width: 990px;
    margin: 0 auto;
    }
    [/css]

    That should do it.


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

    #11473

    rbrown08
    Participant
    Post count: 39

    Jon, Thank you so much!  That just about did it, I made a couple of changes such as:

    didn’t use:

    [css]
    #nav.wrap {
    width: 990px;
    margin: 0 auto;
    }
    [/css]

    for some reason that broke the navigation.

    Added:

    #inner {
    width: 990px;
    margin: 0 auto;
    }

    #.home #inner {
    width: 990px;
    margin: 0 auto;
    }

    I made a few minor adjustments to the margins on the ul and it’s looking good!  Thanks again, I learned something new today and now I should be able to make full width navigation menus :)  I knew it involved a few different areas of the css, but I couldn’t narrow it down.

     


    #11477

    Jon Bellah
    Participant
    Post count: 109

    No problem! Glad that helped. :)


    Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

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

You must be logged in to reply to this topic.