How to make a fluid top menu

  • burgejos000

    #7450

    Hi there. I am trying to put the page menu on the top of the page and have it act like the admin bar on top of the page in wordpress. I have the following code in my custom css:

    #header-menu-wrap {
    margin-top: -163px !important;
    z-index: 15;
    position: relative !important;
    width: 100% !important;
    }

    #header-menu {
    display: table !important;
    margin: 0 auto !important;
    }

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

    This put my menu on the top of the page, centered it, and matched the container width with my page container width. I am wondering how to make it so that the top menu bar can stretch from one side of the computer screen to the other. I also am trying to figure out how to make the menu bar always show up on the top of the page no matter how far you scroll down. Two good examples of these would be the top admin bar in the backend of a wordpress site, or the blue bar on the top of a facebook page.

    Mod

    Kenneth John Odle

    #38222
    Quote:
    I also am trying to figure out how to make the menu bar always show up on the top of the page no matter how far you scroll down.

    See this:

    https://forum.graphene-theme.com/graphene-support/top-bar-menu-help#post-34687

    Quote:
    I am wondering how to make it so that the top menu bar can stretch from one side of the computer screen to the other.

    Not easy, since elements can only expand to the width of their parent element.

    burgejos000

    #38223

    I am not finding anywhere on that forum on how to keep the menu so that its always at the top of the page…

    Is there a way to change the width of the parent element while still making it display as the same width?

    Mod

    Kenneth John Odle

    #38224

    Add this to custom css position: fixed !important;

    Quote:
    Is there a way to change the width of the parent element while still making it display as the same width?

    This is a bit like saying “how do I make it bigger without actually making it bigger?” Not possible.

    That said, there are a couple of different routes to go. I doubt that you want the menu items themselves to stretch all the way across the top, since this will be problematic for people with monitors that are different sizes to yours. It is possible, using CSS, to add a <div> with the same background image across the top of the page and fix it in place to fake the appearance of a menu that stretches all the way across.

    If you really have to have the real thing, about a year and a half or two years ago, someone on this forum figured out a way to get their header to span the entire page width. You can search the forum for it (I didn’t bookmark it), but the theme has undergone many changes since then and I can’t guarantee those codes will still work.

    Of course, it’s possible that someone else has another method. We’ll just have to wait and see.

    burgejos000

    #38225

    when i do: position: fixed !important;

    it does what i want it to.. mostly, The bar stays fixed at the top of the page like i want, however, the blue bar behind the text goes from the left side of the contain to off the screen on the right. The text is centered to the blue bar

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

You must be logged in to reply to this topic.