Custom CSS for Menu Breakpoint in IE

Support
#1

Hi There,

Client updated their site adding more menu items and I found the custom CSS code for changing the breakpoint to 1360px. However, it’s not working in IE and I haven’t been able to figure it out.

Here’s the site:

Here’s the custom CSS I added:

@media (max-width: 1360px){
.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;
}
}

What’s the css to accomplish the same in IE?

Thanks, Todd

#2

Hi @toddbenton,

Thanks for writing in.

You can check the link below for guide on how to use @media queries in IE

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

Hope it helps.

Let us know how it goes.

Thanks.

#3

I wasn’t able to figure it out. Couldn’t figure out which elements to target in IE. I copied and pasted the CSS above from one of your team members response to a request but don’t know what the correct elements would be in IE.

#4

The code we’ve given serves only as a guide and we could not support issues arising from the use of it and other enhancements. For that, you’ll need to hire a third party developer. The best solution for this though is to tell your clients not to add more menus as that is detrimental to user experience. If you wish to stay with the long menu, you need to either use UberMenu, switch to Pro theme or have a third party developer build a custom solution.

Thank you for understanding.