Fixed Menu Scroll Top on Mobile

There is probably a simpler way to do this, but so far this method works for me …When logged into WordPress, on mobile, the Toolbar is visible, and this causes issues for fixed navigation on scroll (a gap becomes visible above navigation).

Add the following to your theme, and adjust your CSS with a top: 0 when the scroll class is added.

var viewportWidth = jQuery(window).width();
	
if (viewportWidth < 667) { // get current screen size by width
	jQuery(window).scroll(function() {
		var scroll = jQuery(window).scrollTop();
		if (scroll >= 80) { // scroll position to move the fixed navigation up
			jQuery('.logged-in #fixed_menu').addClass('mobile_top');
		} else { // move back down upon scroll to top
			jQuery('.logged-in #fixed_menu').removeClass('mobile_top');
		}
	});
}

 

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.