Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Customize slideout menu

  • Hello,

    I am making some customizations to the slideout menu in mobile.

    One of them is to add a section at the end, with some headlines and buttons. Also that the slideout menu container occupies 100% of the height.

    However for some reason, I have to do some scrolling to see the last part of the slideout.

    Another problem is that when I scroll the menu, I also scroll the site, so when I close the menu, I am in a different section than when I opened the menu.

    In the following image, the part marked in red is the part that is not visible until you scroll: https://take.ms/uGlnw

    This was the CSS I used:

    .inside-navigation.grid-container.grid-parent {
    	padding: 30px 20px 0 20px;
    	height: 100vh;
    	max-height: 100vh;
    	overflow: hidden;
    }
  • Hi there,

    the 100vh property will force the container to be the height of the viewport, which doesn’t consider any browser UIs which is why it overflows.

    Try using: 100dvh – the dvh is the dynamic viewport height and will take into account the browser UI.

    And to stop body scroll when the panel is open , add this CSS:

    
    body.slide-opened {
      overflow: hidden;
    }
    
  • Hello David,

    You are a genius, that worked. Thank you very much!

    Just one more thing. I would like the header logo to remain visible in the slideout menu, do you know any way to get it?

    Thanks!

  • You would need to hook the logo in.
    Theres the inside_slideout-navigation hook that appears before the menu inside the off canvas.

  • So, I would have to add the logo through the hook and place a negative margin bottom?

    Is there a way to make it be located in the same place as the logo in the header?

  • Try this CSS:

    .slide-opened .header-wrap {
        z-index: 10000000;
    }
    .slide-opened .header-wrap .inside-header >*:not(.site-logo) {
        opacity: 0;
    }
    .slide-opened .header-wrap   {
        width: fit-content;
    }
  • Hello Ying,

    That works very well. Thank you!

    Just one small thing, when you open the slideout, on the right side of the logo a blue box is shown.

    It looks as if it is the element.

    Do you think we can fix this?

    Take a look: https://take.ms/yjb5v

  • Change this:

    .slide-opened .header-wrap .inside-header >*:not(.site-logo) {
        opacity: 0;
    }

    to:

    .slide-opened .header-wrap .inside-header >*:not(.site-logo) {
        opacity: 0;
        display:none;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.