Add Sticky Menu to Genesis Magazine Pro

[MikeB2]

I tried 10-12 different combinations of PHP, JS, and CSS code before finding the right set of code to fix the navigation menu to the top of the page on scroll. This forum had no workable solutions so I'm posting a solution here.

It came from "STICKY MENU NAVIGATION IN GENESIS" by Katrina at Riot Customs.
https://riotcustoms.com/sticky-wordpress-navigation-menu/

I had to modify the JS and CSS code since the website I was targeting uses the nav-secondary menu instead of nav-primary.

Add to the theme's functions.php:

add_action( 'wp_enqueue_scripts', 'riot_enqueue_script' );
function riot_enqueue_script() {
	wp_enqueue_script( 'sticky-nav', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-nav.js', array( 'jquery' ), '', true );
}

Add this sticky-nav.js file to the js folder in your theme directory. (Note: here is where you will need to change the name of the menu if you are not using nav-primary.)

jQuery(document).ready(function($) {
        var $filter = $('.nav-primary');
        var $filterSpacer = $('<div />', {
                "class": "filter-drop-spacer",
                "height": $filter.outerHeight()
        });
 
 
        if ($filter.size())
        {
                $(window).scroll(function ()
                {
                        if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
                        {
                                $filter.before($filterSpacer);
                                $filter.addClass("fix");
                        }
                        else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
                        {
                                $filter.removeClass("fix");
                                $filterSpacer.remove();
                        }
                });
        }
});

Add this code to your theme's style.css file. Again, you will need to change the menu name if not using nav-primary.

/* Sticky Primary nav */
.nav-primary.fix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    background: rgba(255, 255, 255, 0.92);
}

.admin-bar .nav-primary.fix {
    top: 28px;
}

[Victor Font]

Thanks for posting this tip.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts