Change Breakpoint for Mobile Nav

[The_Capture_Factory]

Hello,

I need to change the breakpoint for the mobile navigation on the website shown in the secure note to show the mobile menu at 1060px could you help me with the CSS please.

Thanks

[Joao]

Hi There,

Please add the following code to Theme Options CSS

@media (max-width: 1060px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope it helps!

[The_Capture_Factory]

Unfortunately that completely breaks the mobile navigation.

[jade]

Hi there,

Please try this code:

@media (max-width: 1060px) {
    .x-nav-wrap.desktop {
        display: none;
    }

    .masthead-stacked .x-btn-navbar {
        display: inline-block;
    }

    .masthead-stacked .x-navbar {
        text-align: center;
    }
}

Hope this helps.

[The_Capture_Factory]

Hello,

That partially works can you have a look at the website in the secure note for me I have applied the styling you have written.

Kind Regards

[nabeel]

Hi again,

I see the menu is not opening in larger breakpoints, to make it work in all devices, try adding the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css({"display": "none", 'height': 'auto'});
		}
		else{
			$('.x-nav-wrap.mobile').css({"display": "block", 'height': 'auto'});
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[The_Capture_Factory]

Works Perfectly thank you

[nabeel]

You’re most welcome!