How to hide the mobile header, but just on the homepage, using CSS?

[DanL]

DanL

February 3, 2021 at 12:06 pm

Hey Guys and Gals of Virtue Theme Mastery…

I’m trying hide the mobile header just on the homepage using CSS. I’m using Virtue Premium on the latest update.

I’m using the ‘Landing – no header’ template for the homepage, and I had to add the following CSS to make the regular header and footer hidden:

.home div#kad-banner-sticky-wrapper {
display: none;
}
.home #pg-163-0> .panel-row-style {
padding-top: 0;
}

.home footer#containerfooter, .home header#kad-banner {
display: none;
}

That all worked just swell, however if the size of the browser is tablet/mobile-sized, it still shows the mobile header. (In the Theme Settings, ‘Use simple mobile header?’ is set to ‘On’. Everything throughout the rest of the site works as expected now, just the homepage of the site still wants to show the mobile header.)

Again, I only want to hide the header on the homepage. (*Login to see link Other pages on the site SHOULD show the header, and other pages (other than the homepage) using the ‘Landing – no header’ template actually do hide the headers already, so it really does appear to be JUST the homepage mobile header that needs to be hidden.

Any CSS that you can share to do the trick would be appreciated!

Thanks,
-Dan