Sticky Menu on Smartphone

[plusstorm]

URL: https://linkgap.com.sg

I have set the menu to Fixed Top but on the smartphone, the 3 line menu button doesn’t follow the page while scrolling.

I have read: https://theme.co/apex/forums/topic/fixed-header-on-mobile/#post-680052 & https://theme.co/apex/forum/t/anchor-link-not-working-on-ios-ipad/33774 and it doesn’t work.

[mldarshana]

Hi There @plusstorm

Thanks for writing in! It seems that there’s a conflict with one of your plugins. Could you please try clearing Autoptimize cache, then disable it and test your site again.

Let us know how it goes.
Thanks!

[plusstorm]

Thank you for your reply. I have tried what you have mentioned but it is still not working.

Cleared the cache of Autoptimize, added the script, cleared the cache on Smartphone and reload the page.

The Script
@media (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
min-height: 100px;
}
}
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0;
}

[basanta]

Hi There,

Thanks for the confirmation!
If I understand properly, you want the mobile menu to sticky similar to the desktop menu.
If so you can make it with this CSS, no need to add the old CSS of JS.

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed;
}
}

Hope this helps!

[plusstorm]

Thank you. It does help but another issue is, when i scroll down and back up again, the rev slider is blocked by the menu. How can i resolve that?

[jade]

Hi there,

Please add this code in the global JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

});

Hope this helps.

[plusstorm]

Great! It is working as it should be. Thank you very much!

[friech]

You’re more than welcome, glad we could help.

Cheers!