Top Bar Menu Help

  • Bekahb

    #7423

    Hello,

    I am trying to move my main menu navigation to the top bar. I have activated the “Top Menu” action hook however I’m not sure where I actually select to move the menu there. I created a custom menu in the widget area and it shows up a jumbled mess. How do I move the entire menu to the top bar?

    Thanks for your help http://www.hisresources.org

    Mod

    Kenneth John Odle

    #38147

    See this:

    Just ignore the part about position:fixed (although you may like that).

    Bekahb

    #38148

    I did this however it is not moving the menu bar to the top. There is a space created there now. I think something is wrong with

    #header-menu-wrap {
    margin-top: -163px !important;
    z-index: 15;
    position: fixed !important;
    }

    I adjusted the margin-top to match the size of my headed and menu bar.

    Mod

    Kenneth John Odle

    #38149

    Add

    #content {padding-top: 130px;}

    Works for me in Firebug.

    Mod

    Kenneth John Odle

    #38150

    You may have to adjust values.

    Be sure to clear browser and server caches before hitting reload.

    Bekahb

    #38151

    This is what I added in the custom CSS:

    #header-menu-wrap {
    margin-top: -163px !important;
    z-index: 15;
    position: fixed !important;
    }

    #container {
    margin-top: 35px;
    }
    #content {padding-top: 130px;}

    Fixed is showing up red? The menu is still below the header pic?? Is there something I possibly need to click somewhere that I’m missing?

    Mod

    Kenneth John Odle

    #38152

    I don’t see that code on the site in question.

    Bekahb

    #38153

    So now the menu is on the top. The coding was on the bottom of the custom css page. I moved it to the top and there it was. Now, however, it is not wide enough. How would i go about fixing that? also, what if we increase the size of the menu so that it will need and 2nd row on the top? And lastly, how do we align it so that it is centered on the page?

    Anonymous

    #38154
    Quote:
    Now, however, it is not wide enough. How would i go about fixing that?

    #header-menu-wrap {
    width: 100% !important;
    }

    Quote:
    And lastly, how do we align it so that it is centered on the page?

    http://www.prasannasp.net/centering-menus-in-graphene-theme/

    Bekahb

    #38155

    Wow you guys are amazing!! Okay so its centered now however the blue bar does not go across the whole page. When I put in the coding for the menu wrap it extend the blue bar to the right across the page (which I LIKE :P) how do I get it to extend left as wel?

    Also, is there a way to have the menu bar stay at the top of the page when you scroll down? http://www.hisresources.org

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

  • You must be logged in to reply to this topic.