Can't adjust main nav mobile break point

Support
#1

Hello. I’m trying to adjust the breakpoint for the main nav for mobile and I’ve tried various bits of code that I’ve found on the forums. They all work, except that when the mobile button appears it doesn’t work any more - the menu won’t open. Any ideas? This is the latest code snippet I’m using:

@media (max-width: 1020px){
.masthead-inline .x-btn-navbar {
   display: none;
}
.x-nav-wrap.desktop {
   display: block;
}
}
@media (max-width: 1020px){
.masthead-inline .x-btn-navbar {
   display: block !important;
   float:right !important;
   margin-top: 30px; /*Vertically center the mobile button*/
}
.x-nav-wrap.desktop {
   display: none !important;
}
body.x-navbar-fixed-top-active .x-navbar { /*To make header fixed on mobile*/
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   }
}
#2

Hello There,

Thanks for writing in! Could you please update your code and make sure to incorporate this code as well?

.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
   display: block;
}

Please let us know how it goes.

1 Like
#3

Thank you for this! I was having the same issue and couldn’t figure out why the mobile menu wasn’t expanding. Glad I found this before posting the same question.

#4

Cool, we are delighted that this thread helps you. :slight_smile:

Cheers!