Problem with responsive using Superfly

[garyjobshops]

I’m now using Superfly for the mobile menu.

I’ve hid the Xtheme mobile nav button all together using:

.x-btn-navbar {
display:none !important;
}

The Superfly menu pops up on mobile and tablets just fine. The only problem is when resizing the window on a desktop it still shows the Xtheme main navigation at the top after a certain breakpoint.

Is there a way to hide the Xtheme regular navigation (main navbar) at a certain breakpoint? Or is there a better way to do all this?

[rad]

Hi @garyjobshops,

Thanks for reaching out.

That should hide it from all devices since it’s not wrapped with @media. But, what you’re referring is a desktop menu which needs a different CSS. Please add this as well

@media ( max-width: 1199px ) {
.x-navbar {
display: none !important;
}
}

Hope this helps.

[garyjobshops]

Thanks, but that code didn’t work correctly. The code you provided above also removes the logo. I just want to remove the desktop navigation.

[Prasant]

Hello @garyjobshops,

Thanks for updating the thread.

Please replace previous code with following and let us know how it goes.

@media ( max-width: 1199px ) {
.x-nav-wrap.desktop {
display: none !important;
}
}

Thanks.