Mobile Menu Dropdown

Support
#1

I’m busy building a website http://www.caninekids.co.za/ if you have a look at my website on your phone… if you press the burger bar immediately it drops down with a white background… but if you scroll down a tiny bit, then it drops down in dark blue. How can I fix this

#2

Hi There,

To fix this issue, please add this custom CSS under X > Theme Options > CSS:

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

Let us know how it goes!

#3

Thank you! The menu is now transparent when I click on the burger menu in the mobile view… Is there a way I can make the menu immediately have the dark blue background on the mobile version… but stay as is on the desktop version? Or should I re design my background for the mobile view? Thanx again!

#4

No, actually its still happening when I pull the screen down when I view on mobile… there is this white block that appears behind the menu…

#5

Hi There,

Could you please change the previous CSS to this?

@media (max-width: 979px){
    .x-navbar {
        background: rgb(2, 24, 37) !important;
        position: fixed !important;
    }
}

Let us know how it goes!

#6

Hello… looks like this is a tricky one. The nav bar jumps to the left now when you drag the screen down…

#7

Hi there,

Please update the previous code to:

@media (max-width: 979px){
    .x-navbar {
        background: rgb(2, 24, 37) !important;
        position: fixed !important;
        width: 100%;
    }
}

Hope this helps.

#8

Yay!!! It worked!!! Thank you so much!

#9

On behalf of my colleauge, you’re welcome. :slight_smile:

#10

Still on the mobile version of the dropdown menu… its more a UX thing… I need the drop down menu to disappear if you click anywhere on the screen… currently it only goes away if you press on the burger menu again…

#11

Hi There,

To achieve that, please add this custom JS under X > Theme Options > JS:

jQuery(function($){
	$('html').click(function() {
		if(!$("#x-btn-navbar").hasClass('collapsed'))
			$("#x-btn-navbar").trigger('click');
	});

	$('#x-nav-wrap-mobile').click(function(event){
	    event.stopPropagation();
	});
});

Hope it helps :slight_smile:

#12

No, unfortunately it’s not working…

#13

Hi there,

Please update the code to:

jQuery(function($){
	$(document).on('click touchstart', 'html', function () {
		if(!$("#x-btn-navbar").hasClass('collapsed'))
			$("#x-btn-navbar").trigger('click');
	});

    $(document).on( 'click touchstart', '#x-nav-wrap-mobile', function( event ) {
	    event.stopPropagation();
	});
});
#14

Hello, no still not working…

#15

Hi there,

Would you mind double checking if you have copied the code correctly and that there are no JS errors prior to adding the code?

I tried test the code previously provided and it seems to work fine on my setup. See scrreencast below ( I am tapping outside the menu area)

In case you are still having an issue, please provide us with your admin details so that we can check the code on your setup.

Thank you.

#16

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