Mobile Menu not expanding on ipad when held horizontally

[newskywebsites]

Hi there, strange thing happening on https://benfranklincraftswi.com/… The mobile menu won’t expand on an ipad when it’s held horizontally. It DOES expand like it should on smaller mobile screens. See short demo video here:
http://somup.com/cqeqYmnTuj

Cornerstone and X are updated to latest versions and so is the WP core. I’ve also tried disabling all plugins and the issue persists. Happens in all browsers.

Can you please help? FYI - this CSS is in place in case that matters:

/* Changing Navbar Breakpoint - Desktop /
/ Replace 1199px with your desired breakpoint value */

@media (max-width: 1150px) {
.x-navbar, .x-navbar-wrap, .x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}

.x-btn-navbar {
display:block !important;
float:right;
}

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

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

Thank you!
Dawn

[thai]

Hi Dawn,

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

@media (max-width: 1150px){
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps.

[newskywebsites]

Thank you, but I added that CSS and cleared my server and computer cache and I don’t see it fixed?

[rad]

Hi Dawn,

I went ahead and added the changes to your CSS and it works

@media (max-width: 1150px) {
  .x-navbar, .x-navbar-wrap, .x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
  }
  
  .x-btn-navbar {
    display:block !important;
    float:right;
  }
  
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display:block;
  }

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

Though, if you really wish to target all iPad then 1150px should be changed to 1366px, especially if you’re testing with iPad Pro.

Thanks!