CSS to hide one nav bar and display another on specific media queries

Hiya,

I’ve got the annoying problem of a landscape tablet using my desktop nav bar. Because I need the dropdowns to work on hover on desktop and then on click on touch screens I need to switch the nav bar on the tablet desktop view.

For all my other media sizes, I’ve done this simply in the visual editor, but I need to use css code to do this for tablet landscape. I found this post, so I’ve used this as a starting point…

Here’s what I’ve tired that isn’t working:

<style>
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.navbar-2 {
display: none;
}
.navbar-2.tablet {
Display: flex;
}
}
</style>

Does anyone have any ideas of what I’m doing wrong?

Thank you!


https://preview.webflow.com/preview/chrysalis-8f4493?utm_medium=preview_link&utm_source=designer&utm_content=chrysalis-8f4493&preview=59cc2de6dc31defb7bebfe2a952a4d65&mode=preview

It is helpful to provide a link and access to your staging URL for inspection via browser dev tools.

Hi Jeff,

I left the link at the bottom, is that not the right thing? Excuse me if I’m being daft!

The staging URL would be the one you use to preview your site in a browser, not the designer. Yours is currently password protected.

Ah right, thanks. I’ve taken the password off https://chrysalis-8f4493.webflow.io/

Hi Jeff,
Now that I’ve shared the staging URL, do you have any advice or thoughts?

Grateful for your time!