Hello @biggsytravels,
We can hide the header image with the help of custom css. Please apply the below given css under Appearance -> Customize -> Additional Css-
@media only screen and (min-width: 768px) {
div.site-header.container-fluid {
display: none;
}
}
I hope the above was helpful.
Kind regards,
Manoj
It’s better to make the changes in Customizer via custom CSS.
That should work:
@media only screen and (max-width: 768px)
{.site-header { display: none !important; }
}
Alternatively you can change to:
@media only screen and (max-width: 768px)
{.container-fluid { display: none !important; }
}
Both should work.
Wow! You guys are the best … and speedy! I went with itonic’s first option below and it worked straight away. Therefore I did not test the other 2 bits of code – but thank you.
@media only screen and (max-width: 768px)
{.site-header { display: none !important; }
}
When I hold my phone in portrait mode the large header is now NOT present (as requested). When I turn my phone landscape the header reappears. I may now look into doing this for all posts except for the home page. I will try to work that out myself 🙂 Thanks again
You bet!
Let everyone know if you come up with a solution for the home page. Might be useful to somebody.
Regards from Austria.
I have a similar problem, however, I want to have the top menu remain visible.
itonic, your code make the whole menu list disappear, is there no code maybe for just the image to go away?
@jaco45
I don’t know what you tried, but it works fine.
I just checked on the current Head blog demo.
See here:
https://pasteboard.co/ImqsBU1Q.jpg
then I am clearly doing something wrong. It removes both the menu and the image. But thanks.
The navigation and header are in completely different DIV containers. If you have not by accident copied the display:none in both of them that should not happen.
See here, how it is in the source code:
https://pasteboard.co/ImqPg1H.jpg
@phpexpert21 @itonic Hi, I have the same problem on my website- https://pyravastuexpert.com
I have used-
@media only screen and (max-width: 768px)
{.site-header { display: none !important; }
}
And menus were also invisible along with header image. I need menus to be displayed on mobile site.
Please help.
Thanks
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@smsjaipur , Open a new thread: https://wordpress.org/support/theme/head-blog/#new-post
When you do, try to avoid pinging these volunteers. Thanks!
