[Resolved] How to disable entire site header on mobile (pages & posts)

[Laura]

I am trying to hide the entire site navigation (logo and menu) for pages and posts on mobile.
https://idealcrm.app/
Current settings

• Mobile Menu – off
• Use Navigation as Header – not checked

I tried all of these in Additional CSS and none work

@media(max-width: 768px) {
body.single #mobile-header {
display:none !important;
}

body.page #mobile-header {
display:none !important;
}
}

@media(max-width: 768px) {
body.single nav#main-navigation {
display:none !important;
}

body.page nav#main-navigation {
display:none !important;
}
}

@media(max-width: 768px) {
body.single #site-nav {
display:none !important;
}

body.page #site-nav {
display:none !important;
}
}

I’ve tried this function in functions.php and it doesn’t work

add_action( ‘wp’, function() {
$disable_nav = get_post_meta( get_the_ID(), ‘_generate-disable-nav’, true );

if ( $disable_nav ) {
remove_action( ‘generate_after_header’, ‘generate_menu_plus_mobile_header’, 5 );
}
}, 100 );

[David]

Hi there,

try this CSS:

@media(max-width: 768px) {
    body:is(.single, .page) #masthead {
        display:none !important;
    }
}

[Laura]

Thank you so much for the quick reply!
Unfortunately that didn’t work either.
It removed the header only from the front page.
The rest of the pages and all posts still have it.
Is there anything else I can supply to makes this process easier? (credentials, screenshots of settings,…)

[David]

Where did you add the CSS?

[Laura]

In the Additional CSS

[David]

I can see it working on the home page…. but not the single posts.
Can you clear any plugin caches you have in place ?

[Laura]

It worked after I cleared cache. Thanks again for the prompt replies! This was very helpful.

[David]

You’re welcome!

[Author]

Posts