New version menu bug

[leslie]

Since updating to latest version of X, the desktop version of the menu does not collapse. I tried to add CSS to the child but it is not working.

The menu should show only when the hamburger button is pressed on all devices including large desktops. Since updating to Version: 6.1.6, the menu shows when the screen is >979px.

How do I fix this?

[nico]

Hi @leslie,

Thanks for writing in.

I could see that there is a problem with a plugin named Autoptimize.

Disable Autoptimize and clear your site and browser cache.

Let us know how it goes.

Thanks.

[leslie]

Thanks Nico but the plugin is not the problem. I checked it in 3 browsers.

The menu should be “collapsed” and not appear until the user clicks the hamburger menu button. Since the theme update, whenever the browser is more than 979px, it appears and does not toggle.

I believe the problem appeared after some change in the theme’s code and may conflict with my child!
Perhaps in:
…/x/framework/legacy/cranium/dist/css/site/integrity-light.css?ver=6.1.6
@media (max-width: 979px)
.x-nav-wrap.mobile {
display: block;
}

To be clear, I am using the mobile menu for desktop too. It should work the same on the desktop as it does on a phone! I believe I have a conflict with the theme’s media queries specifying “max-width: 979px.”
I can’t find the conflict. How do I overwrite these media queries in my child CSS and allow the desktop menu to collapse?

[jade]

Hi Leslie,

Please try this code instead:

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

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in,
  .x-nav-wrap.mobile {
    display: block !important;
  }

  .x-nav-wrap.mobile.collapse,
  .x-nav-wrap.mobile.x-collapsed {
    display: none !important;
  }

Hope this helps.

[leslie]

Thank you your code helped me find what I needed to change. I did not even need to use “!important;”

[friech]

We are delighted to assist you with this.

Cheers!