Mobile Menu Increasing Breakpoint

[webcraftcreative]

Hi, I’m running x-theme for a site and I am trying to get it to switch to the mobile menu at 1300px screen width with the following code. The mobile nav menu is still remaining hidden even though I can see that the classes or changing when I toggle the menu button. I’m probably missing something really simple, but I haven’t been able to figure out what it is.

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

Thanks for your help.

[jade]

Hi there,

Please try this code instead:

@media (max-width: 1300px) {
    .x-nav-wrap.desktop {
        display: none
    }
    .x-nav-wrap.mobile {
        display: block
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

[webcraftcreative]

Perfect! Thanks for your help!

[Prasant]

You are most welcome.