Docs

[instadesign]

Hi, I have followed a couple of threads to try and achieve a nav menu that stays fixed on mobile but I’ve had issues. Here’s the CSS I’ve added:

@media screen and (max-width:979px) {
    .x-navbar {
      position: fixed !important;
      top: 0;
      z-index: 1;
      width: 100% !important;
      opacity: 0.966;
    }

    .x-navbar-fixed-left {
       position: fixed !important;
   }

    .admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
        top: 42px !important;
    }

    .touchevents .x-navbar-fixed-top, .touchevents .x-navbar-fixed-left, .touchevents .x-navbar-fixed-right {
        position: relative !important;
    }

And here’s my Javascript:

jQuery( function($) {
$(window).scroll(function() {
	var width = $(window).width();
	if (width < 980) {
		
		var $adminbarHeight = jQuery('#wpadminbar').outerHeight();
		var $menuTop        = jQuery('.x-navbar').offset().top - $adminbarHeight;
		var $current        = jQuery(window).scrollTop();

		if ($current >= $menuTop && $current > 0) {
			$('.x-navbar').addClass('x-navbar-fixed-left');
		} else {
			$('.x-navbar').removeClass('x-navbar-fixed-left');
		}

	}

However I still have an issue: the mobile nav menu is fixed but is not scrollable so some submenu items are not accessible. I have been struggling to try and find a solution.

Just to add: what my client actually requested was for just the hamburger menu button to be fixed position, rather than the whole header, but I couldn’t find a way of achieving this.

Any help greatly appreciated.

Thanks,

Henry

[Christian]

Hey Henry,

In that case, you should consider using UberMenu or Superfly which comes bundled with X. X comes with a simple menu system only so it is appropriate for a small number of items while UberMenu for instance has more mobile options. Please see our Knowledge Base for more details and usage instructions of the said addons.

Thanks.

[instadesign]

Hi Christian,

Thanks for the suggestion however I have already tried both UberMenu and Superfly on this site and eliminated them for other reasons. From where I am now I simply need a way for the nav menu to be scrollable. Is there not a way of achieving this?

Here’s the dev site: http://tallspaghetti.instadesign.co.uk/

Thanks,

Henry

[Thai]

Hi Henry,

Please try adding the following CSS:

.x-nav-wrap.mobile .x-nav {
    overflow-y: scroll;
    max-height: 480px;
}

Hope it helps 🙂

[instadesign]

Hi Thai,

Thanks for this. The menu now works perfectly below 980px in my desktop browser, however on my Android phone it is not fixed at all. Could you take a look? Any ideas?

Thanks,

Henry

[Rahul]

Hey There,

Thanks for writing in!

Please find and remove this CSS code in customizer :

ul.x-nav {
    display: none;
}

Hope it helps.

[instadesign]

Hi Rahul,

Thanks but I don’t have that code either in my customizer or in my child theme CSS… where are you seeing it? All 3 instances I can see display is set to block.

Thanks,

Henry

[Joao]

Hi henry,

Your navbar is fixed on mobile.

I noticed an scroll bar inside your menu items, please add the following code to Appereance Customizer Custom CSS:

@media screen and (max-width: 979px){
.x-nav-wrap.mobile .x-nav {
    overflow-y: visible !important;
} }

Hope it helps

Joao

[instadesign]

Hi Joao,

I’m not sure how or why but on my Android phone it’s definitely not fixed – it’s as if it’s absolutely positioned, disappearing off the screen as soon as I start to move down the page. I’ve added the code above but it hasn’t made any difference. What mobile are you testing on?

Thanks,

Henry

[Rupok]

Hi Henry,

This is weird as I can also see it’s not fixed on mobile device. It’s fixed on desktop in mobile view and there should be nothing that might make it relative or absolute. As it’s only happening on mobile device, it’s kinda tough to diagnose the issue. Would you try adding the below CSS as well?

@media screen and (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
  position: fixed !important;
}
}

Let us know if that works.

Thanks!

[instadesign]

Hi Rupok,

Thanks for your help however having added the code it’s still the same. I’ve just realised something that may help diagnose the problem though: In Chrome on desktop the behaviour is correct below 980px however if I open dev tools and refresh the page I then get the same incorrect behaviour as on my phone. I wonder if this points to a Javascript issue? I see some javascript errors in my Console…

Thanks,

Henry

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[instadesign]

This reply has been marked as private.

[Jade]

Hi Henry,

Please try to add this code in the customizer:

@media (max-width: 780px) {
    .x-navbar-wrap .x-navbar {
        position: fixed !important;
    }
}

Hope this helps.

[instadesign]

Thanks Jade, but now I’m getting some even stranger behaviour… nav bar mainly now fixed on mobile but menu not scrollable, also weird scroll glitches at the top.

[Author]

Posts