[Support request] Enabling Sticky header doesn’t work

[Tim]

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?

[David]

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.

[Tim]

Hi David,

I did that now, but it’s still not sticky.

[David]

Can you disable any cache/optimization plugins so i can take a closer look?

[Tim]

Done.

[David]

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.

[Tim]

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?

[Ying]

Hi Tim,

Can you try disable all plugins except GP Premium and disable all custom functions/scripts to test?

[Author]

Posts