Make menu bar stick at top of screen if you scroll past it?

  • Resolved flippertie

    (@flippertie)


    11 years, 11 months ago

    I’m looking to build a menu that sticks to the top of the page as you scroll past it like the one on https://99u.com/

    I’ve tried the ‘floating menu’ plugin and ‘Code flavors floating menu’ plugins. They can put a menu that returns to a fixed position if you scroll past it but they don’t seem to have the ‘stop at the top’ effect.

    Can this sort of thing be done in CSS or would I need a jquery script?

    Any advice, or links to scripts tutorials would be appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)

  • If you are using Genesis framework themes, use this plugin https://www.ads-software.com/plugins/genesis-sticky-menu/

    Thread Starter flippertie

    (@flippertie)

    Thanks for replying. I don’t use Genesis – but I did find a theme that has the menu I’m looking for, so I’m using that and will take it apart to understand what it does and perhaps incorporate in my own themes later on…

    What theme are you using? Try this plugin, works great where I’ve used it.

    https://www.ads-software.com/plugins/lowermedia-sticky-js-menus/

    Thread Starter flippertie

    (@flippertie)

    I went with a theme from richwp. The developer there incorporates the sticky menu in most of his themes:
    https://demo.richwp.com/richbusiness/

    I will try your plugin and see if it works for me. It would be great to be able to incorporate the feature into other themes.

    Thread Starter flippertie

    (@flippertie)

    Installed it on a test site and it works fine – thank you!

    One thing that would be nice for v2.0 ?? would be to allow the menu to scroll up to the top and then stick, rather than jumping up to the top as soon as the user starts to scroll the page..

    Shr.Khr

    (@shrkhr)

    Well I have a WP site too where I have implemented a sticky menu bar and I did not have to use any plugin.

    What I used instead is a third party JS called StickyJS which can be downloaded for free.
    This JS is then imported into WP via the functions.php of my WP theme.

    Next you need to call/run this script which is done through some more JS code which can either be placed in the header.php of the theme or imported via functions.php as described above.

    This should be enough to create a sticky menu bar.

    The solution I used is described in full here. It also describes some of the problems I faced (for example my site is responsive, hence, I needed the menu bar adjust its width according to the width of the screen the site is viewed on), sample code and other reference links.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi Shr.Khr, could you post the solution here instead of referring to another source? Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Make menu bar stick at top of screen if you scroll past it?’ is closed to new replies.