Hide Header on Mobile

llDemonll · January 2015

Hi Muffin - I'm wondering how I can show the normal header image on a website, but hide the header on mobile format? I am using the "Classic" styled header with a "Header | Image" and it's working great. What I want to do is just hide the "Header | Image" on a mobile phone browser so that the page goes from the top menu directly to the content of the page with no header

Let me know if this is possible please!

Thanks,

Alex

Albert · January 2015

Hi Alex,

you can do it within below css:

@media only screen and (max-width: 479px) { #Header_wrapper { background-image: none; } }

llDemonll · January 2015

Maybe I'm missing something, but this doesn't appear to be working

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

button:after { display: none; }

#Header_wrapper { background-image: none; }

}

That is the custom CSS I have currently. The first line was from you guys a while back to remove the 'white-wash' hover effect on buttons, the second line is obviously to remove the background header.

max-width was 768 from the previous button hover effect removal, and this should mean it encompasses iPhone 6's as well. I tried it with the 479px originally and that did not work either, I'm still seeing the header.

What stylesheet does the Custom CSS get saved to so that I can see it's at least propagating through correctly?

Albert · January 2015

So we already gave you css for that so we don't understand what else you need. We tested this css and it works of course properly. And until you won't send us url to website we won't be able to have a look on it.

llDemonll · January 2015

Ok so I realized one additional issue that I had overlooked before:

What I'm really trying to do, after realizing this, is use the Header | Minimalist on mobile devices and the normal header on standard computers and such.

Is this possible? If not, I'll make-do. Thanks!

Albert · January 2015

This can be done within custom css. This has been explained on http://forum.muffingroup.com/betheme/discussion/559/how-to-remove-header-background-image-on-mobile-devices-header-background

llDemonll · February 2015

That's perfect; thanks! Exactly what I was looking for

Albert · February 2015

You're welcome

Hide Header on Mobile

Comments