Mobile Menu Screen Width

[Purple-Sprout]

How do I hide the main menu and show the mobile menu at a max width of 1200px?

Thanks

[jade]

Hi @Purple-Sprout,

Please add this code in X > Theme Options > CSS:

@media (min-width: 1200px) {

    .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. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.