Change mobile menu breakpoint

Support
#1

Hello,

I’m trying to change the mobile breakpoint of my site, since it is too wide for smaller devices. So I want to mobile button to display around 1200px.

This one I got from this forum got me close to achieving it

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

The mobile menu button appears at the right width, but when I click it, there is no menu.

I’ve tried numerous other CSS code examples from this forum, but they all didn’t work. Can you help me to achieve this?

#2

Hi There,

Could you please update your Cornerstone plugin to the latest version as well?

https://theme.co/changelog/

Thank you.

#3

Hi,

I updated the Cornerstone plugin to 3.0.4.

I manage to get it to work with this code partially

@media (max-width: 1200px) {
  .x-nav-wrap.desktop {
    display: none !important;
  }
  .masthead-inline .x-btn-navbar {
    display: block !important;
    float: right !important;
  }
  .x-nav-wrap.mobile.collapse.in {
    display: block !important;
  }
  .x-nav-wrap.mobile {
    display: block !important;
  }
  .x-nav-wrap.mobile.x-collapsed {
    display: none !important;
  }
  [data-x-toggle-collapse] {
    transition: height 0.3s ease !important;
  }
}

Only thing is, the menu doesn’t open smoothly. When you click the icon, there is a short delay and then the menu is just display abruptly. I’d like it to come out with the default smooth animation. I’m probably missing something in my code.

#4

Hey Matthias,

Before I give a fix to your code, please note that there’s no option to change the fixed media queries in the theme. The theme was designed with the common device screen widths in mind. By overriding the design and code, you are taking with you the responsibility of maintaining the customization including fixing issues that would arise from it and further enhancements.

Please update the code to the one below. I tested that code in your site and it works.

@media (max-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
    }
}

Hope that helps and thank you for understanding.

#5

Thank you, this worked exactly as I needed it!

#6