-
Pedro Reyes
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; }
-
David
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
– thedvh
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; }
-
Pedro Reyes
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!
-
David
You would need to hook the logo in.
Theres theinside_slideout-navigation
hook that appears before the menu inside the off canvas. -
Pedro Reyes
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; }
-
Pedro Reyes
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; }
- You must be logged in to reply to this topic.