Top Menu Sticky?

You can add the following jquery script to make the top menu sticky:

$(document).ready(function(e) {
    var nav = $('.nav_holder');
	var navlink = $('a.nav_link');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width(),
				"z-index": 1000
            });
            isFixed = true;
			navlink.css({
				"border-bottom-left-radius":"2px",
				"border-bottom-right-radius":"2px"
			});
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

Sorry I am not good with editor… where do I add that?

Thanks for your help!!

In that case, I’m afraid it will be quite tough for you. Still, I’ll try to show you.

If you are not using child theme, insert the following code in functions.php:

function add_my_script() {
    wp_enqueue_script(
        'sticky-nav-script',
        get_template_directory_uri() . '/js/sticky-nav.js',
        array('jquery')
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

If you are using a child theme, create a functions.php in the child theme folder (if it’s not already) and insert the following code:

function add_my_script() {
    wp_enqueue_script(
        'sticky-nav-script',
        get_stylesheet_directory_uri() . '/js/sticky-nav.js',
        array('jquery')
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

If you are not using child theme, look for the js folder in the theme folder. If its not there, create a folder and create sticky-nav.js file in the folder. Insert the following code in the this file (there were some errors in the previous code, sorry):

jQuery(document).ready(function(e) {
    var nav = jQuery('#topbar');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = jQuery(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width(),
		"z-index": 1000
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

In the last code above, you will see #topbar. You need to replace it with the id or class of your top menu.

I hope this helps.