Static Navbar Moible

Support
#1

Hello,

Can you please help me make my nav bar static on mobile devices? I have a page with a lot of text and would like the user to be able to click on the menu at any point in their reading.

Thank you.

#2

Hi there,

Please add this code in the global CSS:

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

That worked! Thank you.

Is there something I can add so that after a user selects on item from that mobile menu it automatically closes. Right now it stays open and blocks the content unless they intentionally click the menu again.

Thank you!

#4

Hi there,

Please try this code in the custom JS:

jQuery(function($){
  
  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

});

Hope this helps.

#5

Unfortunately, that did not work.

#6

Hello there,

Thanks for updating in!

Please have the JS code updated and use this instead:

jQuery(function($){
  $('#x-nav-wrap-mobile .x-navbar .x-nav a').on('touchend click', function(){
      $('#x-btn-navbar').click();
  });
});

Hope this helps.

#7

Thanks for trying but sadly this did not work either.

#8

Hi there,

None of the JS code you are trying to add is working because there is a Javascript error present on your site that stops other JS codes from working.

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#9

Hi! Thank you! I found the error.

However, neither one of these codes keep the navbar viewable and also closes after a menu item is clicked. Now that I have fixed the JS error, maybe you could suggest another solution?

Thank you!

#10

Hi There,

I’ve added this custom JS and the mobile menu is closed after clicked.

jQuery(function($) {
	$(".x-navbar .mobile .x-nav li>a").on('click touchend', function(event) {
		event.preventDefault();
		$("#x-btn-navbar").trigger('click');
	});
});

Could you please check again?

Cheers!

#11

Hi Thai,

Thank you for your efforts! That does work but then the nav bar stays way up at the top of the page as the user scrolls down. I would like the nav bar to remain visible at the top of the page as the user scrolls and also have the menu close after clicking. Is this possible?

Thank you!

#12

Hello There,

The codes did not work because you added in the wrong section.

  • please add the CSS in Theme Options > Custom CSS
  • please add the JS code in the Theme Options > Custom JS

Hope this helps.

#13

Thank you so much! All is working correctly now. I appreciate your patience.

#14

You’re most welcome. :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.