WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Make menu bar stick at top of screen if you scroll past it? (8 posts)

  1. flippertie
    Member
    Posted 1 year 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 http://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.

  2. iniyan
    Member
    Posted 1 year ago #

    If you are using Genesis framework themes, use this plugin http://wordpress.org/plugins/genesis-sticky-menu/

  3. flippertie
    Member
    Posted 1 year ago #

    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...

  4. hawkeye126
    Member
    Posted 1 year ago #

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

    http://wordpress.org/plugins/lowermedia-sticky-js-menus/

  5. flippertie
    Member
    Posted 1 year ago #

    I went with a theme from richwp. The developer there incorporates the sticky menu in most of his themes:
    http://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.

  6. flippertie
    Member
    Posted 1 year ago #

    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..

  7. Shr.Khr
    Member
    Posted 4 months ago #

    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.

  8. Andrew
    Forum Moderator
    Posted 4 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic