Sticky Header Overlapping Existing Header

[Cr4zyS4m]

Hello,

I have been working on an issue with using a Sticky Header. I am using the base Genesis Framework (2.5.3) and building a Child Theme with Child Theme Configurator. I am also using their Responsive Menu plugin. The responsive menu works great on mobile devices and only appears at 767px width or smaller as it's supposed to. So naturally I wanted a Sticky Header to appear on larger screens as well but smaller than the existing header upon scroll. I came across the code below which worked great but would appear behind the responsive menu on mobile devices...
CSS: `.agct_sticky {
background-position: left;
text-align: right;
background-image: url(images/cropped-logo.png);
background-repeat: no-repeat;
display: none;
position: fixed;
top: 0;
border-bottom: 1px solid #2489f5;
background-color: #000;
left: 0;
right: 0;
}`
JS: `jQuery(function($){

var $mainMenu = $('nav.nav-primary'),
$stickyMenu = $('.agct_sticky');

$(window).on('scroll', function() {
var windowTop = $(this).scrollTop(); //get top of window
var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height(); //bottom of main menu
if( windowTop >= mainMenuBottom ) { //main Menu is no longer showing
$stickyMenu.slideDown(); //show our sticky menu
} else {
$stickyMenu.slideUp(); //hide our sticky menu
}
});

});`
Functions: `//Sticky Header Desktop
add_action('genesis_after_footer','agct_sticky_menu');

function agct_sticky_menu(){
wp_nav_menu( array(
'container' => 'div',
'container_class' => 'agct_sticky nav-primary',
'menu_class' => 'genesis-nav-menu',
'theme_location' => 'primary'
) );
}

//Call To js
add_action( 'wp_enqueue_scripts', 'agct_sticky_load_scripts' );

function agct_sticky_load_scripts(){
wp_enqueue_script('sticky_menu', get_stylesheet_directory_uri() . '/js/sticky.js', array( 'jquery' ),'1.0.0',true);

}`

Added the following line to JS:
if ( $(window).width() > 768) { //hide on size less than 768
Now the JS is:

jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
        $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
        var windowTop = $(this).scrollTop();  //get top of window
        var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
        if( windowTop >= mainMenuBottom );  //main Menu is no longer showing
		if ( $(window).width() > 768) { //hide on size less than 768
            $stickyMenu.slideDown();  //show our sticky menu
        } else {
            $stickyMenu.slideUp();  //hide our sticky menu 
        }
    });

}); 

Now it only appears on screens 768px width or larger. Fantastic!

But it won't disappear....

Upon scrolling to the top of the page, the compressed sticky header is still there and it overlaps the existing Header/Menu at the top of the page. I feel like I am missing something or there is a simple adjustment that needs to be made and I'm not seeing it. Any assistance would be greatly appreciated, thanks in advance!

http://betasite.inplainsight.ca

[tarmadillo]

I think you are missing some {}'s after if( windowTop >= mainMenuBottom )

im not sure if you are trying to do this:

jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
        $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
        var windowTop = $(this).scrollTop();  //get top of window
        var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
        
        if( windowTop >= mainMenuBottom ) {
            if ( $(window).width() > 768) { //hide on size less than 768
                $stickyMenu.slideDown();  //show our sticky menu
            } else {
                $stickyMenu.slideUp();  //hide our sticky menu 
            }
        }
    });
}); 

or this:

jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
        $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
        var windowTop = $(this).scrollTop();  //get top of window
        var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
        
        if( windowTop >= mainMenuBottom ) {
            if ( $(window).width() > 768) { //hide on size less than 768
                $stickyMenu.slideDown();  //show our sticky menu
            } 
        } else {
            $stickyMenu.slideUp();  //hide our sticky menu 
        }
    });
}); 

I think you want the second one

---

https://armadillowebdesign.com

[Author]

Posts