Archived topic
Enabling Sticky header doesn't work
7 replies · Started by Tim on September 30, 2021
Hello,
I want to make the header (blue top bar and the logo/nav icons) sticky when using mobile.
I have set Layout > Header > Sticky to on and Layout > Sticky Navigation to Mobile Only.
However, the header is still not sticky when scrolling.
Are these settings correct? Do I need to set both of them?
Hi there,
I assume the Customizer > Layout > Primary Navigation >>> Mobile Menu Breakpoint is 0 as you're using the desktop Navigation as Header across all screen sizes.
If thats the case then:
1. Disable the Mobile Header - its not required.
2. Just set the Sticky Navigation ( as per the second screen shot ) to Mobile.
Hi David,
I did that now, but it's still not sticky.
Can you disable any cache/optimization plugins so i can take a closer look?
Done.
I see this error in the console:
Uncaught ReferenceError: jQuery is not defined at (index):3056
which is related to this script in your footer:
<!-- WooCommerce JavaScript -->
<script type="text/javascript">
jQuery(function($) {
$( '.add_to_cart_button:not(.product_type_variable, .product_type_grouped)' ).on( 'click', function() {
gtag( 'event', 'add_to_cart', { 'event_category': 'ecommerce', 'event_label': ($(this).data('product_sku')) ? ($(this).data('product_sku')) : ('#' + $(this).data('product_id')), 'items': [ {'id': ($(this).data('product_sku')) ? ($(this).data('product_sku')) : ('#' + $(this).data('product_id')),'quantity': $(this).data('quantity')} ] } );
});
});
</script>It could be also breaking the sticky nav, as one JS error can cause other scripts to stop functioning.
I just found another setting that was set to defer JS. Disabled it and now I get 0 errors in the console.
Could you check again?
Hi Tim,
Can you try disable all plugins except GP Premium and disable all custom functions/scripts to test?
