Make Upper Header Stick on Scroll

Hey Michael,
Thanks for the link to your site, currently it looks like your header is sticky so you will disable that and add this code to the end of your functions.php:

function sticky_header_meta() { ?>
    <script>
(function($){
$(function() {       
 var scroll_start = 0;
 var startchange = $('#header_meta');
 var offset = startchange.offset();
  if (startchange.length){
 $(document).scroll(function() { 
    scroll_start = $(this).scrollTop();
    if(scroll_start > offset.top) {
      document.getElementById('header_meta').classList.add('sticky-top');
     } else {
      document.getElementById('header_meta').classList.remove('sticky-top');
     }
 });
  }
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'sticky_header_meta');

and this code to your Quick CSS:

#header_meta.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:10000!important;
	width: 100%;
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,
The script above should work correctly for mobile only, just use this css instead of the css above:

@media only screen and (max-width: 767px) { 
#header_meta.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:10000!important;
	width: 100%;
}
}

Then clear your browser cache and check.

Best regards,
Mike