[Resolved] hide the menue on certrain pages

Home Forums Support hide the menue on certrain pages

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1154540
    Hannah

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

    #1154605
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1154779
    Hannah

    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 πŸ™‚

    #1154883
    Leo
    Staff
    Customer Support

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

    #1157822
    Hannah

    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

    #1158172
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1158533
    Hannah

    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

    #1158593
    Hannah

    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

    #1158983
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1161484
    Hannah

    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

    #1161628
    David
    Staff
    Customer Support

    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

    #1165925
    Hannah

    Yaaay thank you SO much!! πŸ™‚

    #1166066
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.