Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] landing page –> menu should hide by default, but appear when scrolling down

Home Forums Support landing page –> menu should hide by default, but appear when scrolling down

Viewing 15 posts - 1 through 15 (of 45 total)
  • Author
    Posts
  • #169825
    Sven

    Hi Tom,

    haven’t found a solution in the support forum to that challenge:

    I created a landing page (section-based). Have a look: http://www.fudiggl.de

    When the start-page loads, the menu appears by default (on the very top of it). Is there a way to hide that menu until a user scrolls down? Then it should appear permanently and behave as on any other page/post…

    Or otherwise: is it possible to deactivate the menu on a per-page base and to hook it somehow to a certain section?

    I appreciate your answer!

    Sven

    P.S.: Would be cool, when the menu slides out/disappears again (same behavior as customized), after one clicked “back-to-top-button” (great little improvement!) and the page scrolls back to the top…

    #170475
    Tom
    Lead Developer
    Lead Developer

    Hi Sven,

    That website doesn’t seem to be loading for me.

    Can you check and let me know?

    Thanks!

    #170545
    Sven

    Hi Tom,
    should be working… can you pls try again?
    Sven

    #170547
    Tom
    Lead Developer
    Lead Developer

    Hmm let’s try this..

    Set the “Sticky effect” to “Fade” or “Slide”.

    Then add this CSS:

    .main-navigation {
        display: none;
    }
    .main-navigation.navigation-clone {
        display: block;
    }

    Nice site BTW!

    Let me know 🙂

    #170582
    Sven

    Nearly… the menu is hiding and by scrolling down it appears (with the set effect)… that’s cool!

    But now there appears a white block where the menu regularly was. Also a dot “.” shows up on the left side!?

    http://www.fudiggl.de/wp-content/uploads/hide_menu_error1.jpg

    Any suggestions?

    #170597
    Sven

    Hi Tom,

    I actually discovered, that this way the menu not only disappears on my start page but on ANY (!) page/post… I had to adjust that, so it takes effect only where I want to have it…

    page-id-nnn .main-navigation {
    display: none;
    }

    .page-id-nnn .main-navigation.navigation-clone {
    display: block;
    }

    (where nnn ist the page-/post-id)

    Now I only need help with that dot and that blank area!

    Hope, you have an idea!?

    #170804
    Tom
    Lead Developer
    Lead Developer

    The dot seems to be coming from this custom CSS:

    .my-transparent-section:before {
        position: absolute;
        content: ".";
        background-color: rgba(255, 255, 255, 0);
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    Where’s the main image coming from? Is it uploaded as the section background?

    #170814
    Sven

    Hi Tom,
    no, it’s manually set as background-image:

    body.page-id-nnn {
    background-image:url(‘http://www.fudiggl.de/wp-content/uploads/site_background_2016.jpg’);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-clip:border-box;
    background-position:0px 70px;
    background-size: 1963px auto;
    }

    Concerning “the mysterious dot” 🙂
    I used your code snippet for transparent sections as mentioned in the support forum. Just out of curiosity: why did you use it in your code? Is there a deeper meaning?

    I have deleted it in the code snippet, seems to me, there’s no negative effect… so I’ll leave it blank.

    Now there’s only one further thing: actually the menu is hiding and instead of the menu there’s a blank white space on top of my start page. How to expand the background image so there’s no white area at all?

    #170817
    Sven

    I’ve seen it myself…!!! Somewhere in the positioning process I set “background-position:0px 70px;”

    It’s done!

    Thank you for your support!

    Best wishes,
    Sven

    #170818
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you found it 🙂

    #1142006
    Sven

    Hi Tom,

    after months I recently encountered an error at https://fudiggl.de :
    on the start page I hide the main menu. It’s showed when scrolling down. Therefore I used your recommended css as written in this post.

    Now recently the menu disappeared at all – and doesn’t show when one scrolls..

    Also on my mobile phone (chrome browser) the word “menu” and its common icon (three horizontal lines) are shown, but the don’t work: one can tap on the word or the lines and that changes the color of the menu background, but no menu appears!

    But: it works well within the customizer…

    I don’t know anymore, where to look and what to do… so I appreciate your help!

    Best regards, Sven

    #1142011
    Leo
    Staff
    Customer Support
    #1142016
    Sven

    Now any menu is hidden… no menu at all!

    #1142056
    Leo
    Staff
    Customer Support

    Did you remove the CSS Tom provided previously?

    Let me know 🙂

    #1142257
    Sven

    Yes I removed Tom’s code and added the one, you mentioned: https://docs.generatepress.com/article/show-sticky-navigation-only/

    then the menu disappeared (desktop and mobile)

    now I’ve reset: deleted sticky and re-added Tom’s css again… error persists!

Viewing 15 posts - 1 through 15 (of 45 total)
  • You must be logged in to reply to this topic.