Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky Header Overlapping Existing Header
- This topic has 1 reply, 2 voices, and was last updated 6 years, 1 month ago by
tarmadillo.
-
AuthorPosts
-
October 10, 2017 at 11:06 pm #212399
Cr4zyS4m
MemberHello,
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.caOctober 11, 2017 at 2:14 pm #212434tarmadillo
ParticipantI 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.