Reply To: Floating navbar problem

[Tom]

You can use javascript to move it below the header at a certain breakpoint:

Insert this into the wp_footer hook in GP Hooks:

<script type="text/javascript">
	jQuery(window).load(function($) {
		var widthTimer, breakpoint;
		breakpoint = jQuery( window ).width();
			
		function generateMoveNav() {
			if ( breakpoint < 915 ) {
				jQuery('.main-navigation').insertAfter('.site-header');
			} else {
				jQuery('.main-navigation').prependTo('.inside-header');
			}
		}
			
		if ( breakpoint < 915 ) {
			generateMoveNav();
		}
			
		jQuery(window).resize(function() {
			clearTimeout(widthTimer);
			widthTimer = setTimeout(generateMoveNav, 100);
		});
	});
</script>

Then use this CSS to remove the float:

@media (max-width:915px) {
      .nav-float-right .main-navigation {
            float: none;
      }
}