Hide Header Background Image on Mobile Devices

EnvatoWBU · May 2019

Hi,

How can I hide the Header Background image on mobile devices?

I tried something like this:

@media only all and (max-width: 768px) {
.page #Header { visibility: hidden; }
}

But that hides the full header, including the menu.

I just want to hide the background image on mobiles or have it take up much less space in height.

Many txs

K

height:1200px

Pablo · May 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co

thanks

EnvatoWBU · May 2019

Hi Pablo,

Many thanks for your response.

Apologies for that. Example site/page is this:

https://casapintadainvestments.com/why-mining-housing-in-panama/

So on mobile devices, I don’t want to header image of the
street to be displayed (because it relatively takes up a lot of space on mobile
screens).

So on mobile I just want the logo/menu with directly underneath
the orange bar with the page title ‘Why Mining Housing in Panama’.

I hope this clarifies my question?

Best

K

Pablo · May 2019

Please paste that code into the Theme Options > Custom CSS & JS > CSS

@media (max-width:767px){
	header#Header{
    min-height:50px !important;
	}
}

It will solve your problem

Thanks

EnvatoWBU · May 2019

Excellent - that's what I was looking for.

Many thanks Pablo

K

Hide Header Background Image on Mobile Devices

Comments