Sridhar Katakam

Genesis and WordPress Tutorials

How to set up a fixed nav menu that appears upon scrolling in News Pro

by 10 Comments

Bob asked in Genesis Google+ community:

I would like to use News Pro child theme for a project but I would like to have a sticky menu on top. I want this to be a different menu than primary and secondary and only show when the people scroll down.
Can anyone help me with suggestions of how to achieve that?

This can be done by extending my earlier post titled, Displaying a fixed navigation menu upon scrolling down in Genesis.

In this tutorial I provide instructions for showing a designated custom menu to fade in when the user scrolls down and fade out when scrolled back to top in Genesis child theme, News Pro.

Screenshot:

News Pro – HTML5 Genesis Theme

Screencast:

Sticky Menu JavaScript

Create a file named sticky-menu.js having the following code and upload it under js directory (create this) under the child theme.

Note that the script is set to show the sticky menu only when viewport width is greater than 500px. This means sticky menu will not appear on mobiles. If you would like to remove this condition, delete && window.innerWidth > 500

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I couldn’t get this to work – suspect I may be misunderstand where the js directory goes – does it go in the same folder as the child theme itself – ie. a new folder alongside images and languages ?

    Reply

      • Sorry, inadvertently I didnt use the correct field for reply. I am reposting here, please delete the other posts
        _______________________
        Hi
        I changed selectors and its working ->

        $(“.mwm-aal-container”).fadeIn();
        } else {
        $(“.mwm-aal-container”).fadeOut();

        I need to specify further selector to format
        the menu while not under scrolling.

        I’ve tried out

        $(“.mwm-aal-container .sticky”).fadeIn();
        } else {
        $(“.mwm-aal-container .sticky”).fadeOut();

        &
        $(“#mwm-aal-container .sticky”).fadeIn();
        } else {
        $(“#mwm-aal-container .sticky”).fadeOut();
        &
        $(“.mwm-aal-container”).addClass(‘sticky’);
        } else {
        $(“.mwm-aal-container”).removeClass(‘sticky’);

        but they get ignored.

        The reason for a further selector is that the menu appears only after scrolling
        while I need it visible also before scrolling.
        This is true for nav-primary also so it’s not an error related to an anchor-menu.
        Actually Im on genesis base not on News Pro, but there should be no difference
        related to selectors.

        I’ve also tried out jQuery pin, which is great
        but it is working only with the .nav-primary.

        Reply

  • Hi
    I changed selectors and its working ->

    $(“.mwm-aal-container”).fadeIn();
    } else {
    $(“.mwm-aal-container”).fadeOut();

    I need to specify further selector to format
    the menu while not under scrolling.

    I’ve tried out

    $(“.mwm-aal-container .sticky”).fadeIn();
    } else {
    $(“.mwm-aal-container .sticky”).fadeOut();

    &
    $(“#mwm-aal-container .sticky”).fadeIn();
    } else {
    $(“#mwm-aal-container .sticky”).fadeOut();
    &
    $(“.mwm-aal-container”).addClass(‘sticky’);
    } else {
    $(“.mwm-aal-container”).removeClass(‘sticky’);

    but they get ignored.

    I’ve also tried out jQuery pin, which is great
    but it is working only with the .nav-primary.

    thanks

    Reply

  • The reason for a further selector is that the menu appears only after scrolling
    while I need it visible also before scrolling.
    This is true for nav-primary also so it’s not an error related to an anchor-menu.
    Actually Im on genesis base not on News Pro, but there should be no difference
    related to selectors.

    Reply

  • I have made this in Enterprise-Pro, one small problem: How can I make the Menu open later, after header, after primary-nav. In Enterprise Pro the Menu are “normal” after Header, so if I scroll only 50 pix I have booth menus. Link: http://irisgruber.de/123456 (123456 because of Maintenance mode plugin)

    Reply
    • >