How to make a floating navigation bar

  • Author
    Posts
  • #2345339

    I am using the Hemingway Rewritten Theme and I am trying to figure out what sort of CSS I need to add to my theme in order to have my main menu scroll when the reader scrolls down the page. I want them to be able to have access to the bar without having scroll back up to the top of the page.
    I appreciate any help that you can offer!

    The blog I need help with is whimsywriter.com.

    #2345449

    raulanton
    Staff

    Hi Lauren.

    You can put it at the top of your page with this CSS code:

    `#site-navigation {
    position:fixed;
    top:0px
    }

    Or at the bottom, changing top:0px by bottom:0px

    Hope this can help you.

    #2345450

    raulanton
    Staff

    Sorry

    #site-navigation {
    position:fixed;
    top:0px
    }
    #2345459

    Thank you raulanton! I have one more question. This does solve the problem of not forcing the reader to go back to the top of the page but I would prefer if it stayed where it is now and when the reader scrolls down the page it sticks to the top.
    If that’s not possible, then thanks for the help that you’ve already provided!

    #2345482

    I tried using this:

    .main-navigation {
    position: sticky;
    top: 0px;
    }

    Which fixes my problem when I’m in the customize section. But as soon as I close that out and refresh my browser all I can see is a tiny section of the bar peaking out. But if I increase the amount of pixels it just creates a big gap.
    I don’t know if I explained it well the first time but I’m trying to get the menu to stay underneath the header until the reader scrolls down the page.
    Once the menu hits the top of the page, that is when I want it to stay there.
    I’m using Firefox. However, when I open my page in Google Chrome or Internet Explorer there is no change at all.
    Has anyone actually created a menu that is sticky once the reader scrolls down the page?

    #2345543

    raulanton
    Staff

    Hi.

    Yes. That’s right. Sticky option could work, but it is not supported for all browsers. You can check browser compatibility here: http://caniuse.com/#feat=css-sticky

    #2345544

    Ahhhh that makes sense. Thanks for your help, I really do appreciate it. I guess I’ll leave the forum open in case anyone has come up with another solution to this issue.

The topic ‘How to make a floating navigation bar’ is closed to new replies.