[Resolved] hide the menue on certrain pages

[_blank]

Hello, is it possible to hide the menue on certrain pages?
Thank you very much
Best
Hannah

[Leo]

Hi there,

You can use the disable element metabox for each page:
https://docs.generatepress.com/article/disable-elements-overview/

Or create a layout element to take care of multiple pages:
https://docs.generatepress.com/article/layout-element-overview/#disable-element

Let me know if this helps 🙂

[_blank]

Hi dear Leo,

thank you so much for your quick response.
I did not specify my issue enough.
What I would like to do, is to hide my standard main menu and switch it with an elementor menue. On Desktop this works well so far but on mobile it does not.
thank you so much for your help 🙂

[Leo]

So do you want to hide the entire mobile header or just the toggle?

[_blank]

What do you mean by toggle?

I think I would like to hide the entire mobile header on certrain pages. (all pages created by one author)
My main business is a product, so my website is about this product.
Now I am under the same brand also organizing a festival.
To not get people confused about the product and the festival, i have for each its own header and footer menu (created with elementor)
This works wonderful on desktop but on mobile I have currently both menus. This is an example page: http://www.yogajunkies.at/festival

Thank oyu so much
Best
hannah

[Leo]

If you add the PHP snippet here:
https://generatepress.com/forums/topic/gp-1-9-0-update/#post-1069229

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then you can use either disable header in the disable element metabox or layout element to hide the mobile header.

Let me know if this helps 🙂

[_blank]

Hello, I added the snipped and then went on pages – deactivate element and clicked the header checkbox: https://prnt.sc/qz9itj
Unfortunately, there are still 2 menus on mobile so something is not working correctly…
moreover, I wanted to ask if once it will work, will it only apply to mobile and my festival pages?
thank you so so much for your help
Best
Hannah

[_blank]

This is what i would like to hide: http://prnt.sc/qzazmd
(the mobile main header menü and also the cart) but only on certain pages – the pages which present my festival
thank you so much

[Leo]

Ahh ok sorry if it’s only on mobile we would need to use CSS:

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[_blank]

Hi Leo,
thank you so much! It works great for the homepage of the festival!
I tried to apply the same code with the according ID to all its subpages but unfortunately this did not work.
My coding now looks like this:

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

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

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

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

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

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

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

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

Is there maybe another option to apply it? Such as the mobile header will not be displayed on mobile for pages with the author Tyler W? ( This is a little trick I used somewhere else…)
thank you so so much
Best
Hannah

[David]

Hi there,

you’re missing a space in your CSS selectors eg. this:

body.page-id-29644#mobile-header

should be:

body.page-id-29644 #mobile-header

Alternative methods such as using a class specific to say an author is not easily done with pages as they don’t tag pages like posts do.

Alternative:

1. Create a new Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/

2. Add this to the content:

<script>
@media (max-width: 768px) {
    #mobile-header {
        display: none !important;
    }
}
</script>

3. Select the WP_Head hook

4. Set you Display Rules to include those pages you want the Mobile header removed from

[_blank]

Yaaay thank you SO much!! 🙂

[David]

You’re welcome

[Author]

Posts