Hide header on mobile

webbabe

Is there a way to hide the header on mobile?

I tried the following but that also hides the Revolution slider slideshow, which apparantly is part of the header I guess.

@media only screen and (max-width: 767px) {

   #Header { display: none !important; }

}

Phil

Hello,

Please, try the following code instead:

@media only screen and (max-width: 767px) {

  #Header #Top_bar { display: none !important; }

}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webbabe

Thanks! That works!

And what if you'd like to remove the header completely on all platforms? Tried to find a setting but couldn't.

Phil

Sorry, but I do not understand.

What platforms you are talking about?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webbabe

Sorry for being unclear, I mean everywhere, so on mobile, desktop, tablet, notebook, etc.

Basically disable the header all together.

Phil

To achieve that, you need to only remove the media queries from the previous code. It should look like this:

#Header #Top_bar { display: none !important; }

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webbabe

Ah, that makes sense of course, didn't think of that!

Thanks for pointing me into the right direction Phil!

Phil

No problem. 🙂

If there is anything I could help you with, please, let me know.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next