Hide nav bar on tablets and mobile

[KatrineBB]

Hi,

This seems simple, but it’s obviously not simple for me.

I need help hiding the nav bar on tablets. I use Shift Nav for phones and and tablets – and managed to hide the primary nav bar on phones, so it’s only ShiftNav that’s visible. How do I do that with tablets as well?

Tried @media only screen (max-width: 768px) but it didn’t help. I’m stuck 🙁

Thanks in advance.

BR, Katrine 🙂

[scrambler]

You need to provide a link to your site and elaborate. I have no idea what you mean by “I used Shift Nav for phones an tablet.

[KatrineBB]

Sorry – I always forget that! http://www.designstudio.dk

Shift Nav is a plugin

[scrambler]

To hide the menu bar on both phone and tablets, add the rule below in Advanced options > Head Section > Custom CSS Rule box

@media only screen and (max-width:640px) {
#wrap-top-menu {display:none;}
}

You do need to provide an alternate method for menu when the browser gets small (which I am not seeing right now)

[KatrineBB]

It doesn’t seem to work. Any ideas?

The alternative is the ‘Shift Nav’ that only shows when at mobile device is detected.

Thanks 🙂

[scrambler]

It appears to be working just fine for me,  if I shrink my browser, under 640px , the menu bar disappears.

If it does not for you, try clearing your cache

You can increase that value if you want it to disappear earlier.

You may also want to add !important

@media only screen and (max-width:800px) {
#wrap-top-menu {display:none !important;}
}

[KatrineBB]

Works like a charm.

Almost had it then – didn’t know that it was #wrap-top-menu though.

Thank you very much! 😀

[scrambler]

When the menu disappears, I see nothing telling me how to get one.

Not great for visitors….

[Author]

Posts