Page 1 of 1
OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 12:19 am
by dnlyko
When the browser window is shorter than the list of pages listed in the menu, there is no way to scroll up to return to the 'Home".
You can scroll down to reveal all the unseen menu pages below, but no scrolling up to select the 'Home' page.
Only by increasing the height of the browser window will the top pages become visible.
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 7:17 am
by Pablo
Do you have a demo project so I can see which settings you have used?
For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 6:38 pm
by dnlyko
Sorry,
Please note that the only thing on the Overlay Menu I changed was the 'Synchronize' option
Please go to
https://rockngroove.ca/
Click on the menu
Now adjust the bottom of your browser height so just the 5 menu items are in the browser
Now click on 'Snaps'
The top menu items are not displayed and you are not able to scroll up, no way to go and select the 'Back' menu item
You will be able to scroll down though
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 7:35 pm
by BaconFries
When it is "asked" to provide a "Demo" it is a copy of the project (.wbs) not a url!. The reason for this is so that the .wbs can be opened in the software and then check the settings.
So as previously asked please read the following:
Do you have a demo project so I can see which settings you have used?
For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 8:16 pm
by crispy68
The issue lies with the fact that the menu uses flexbox to vertically center the menu subitems. It is always trying to center the list within the height which cuts off the top. This menu is not ideal for lots of subitems unless you were to create smaller groups.
You will need to add some CSS to make it work. Add the following to an html object/page html between the head tags:
Code: Select all
<style>
#indexOverlayMenu1-overlay ul{overflow-y:auto;max-height:100vh;}
</style>
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Feb 06, 2024 8:51 pm
by dnlyko
Thank you crispy68
Now it works like a charm
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Dec 16, 2025 3:47 pm
by crispy68
Do you have a link to the site to view what you're talking about?
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Dec 16, 2025 5:32 pm
by dnlyko
https://matrixsupply.ca/
When viewed on a Pixel Phone the first menu item (home) is hidden under the Chrome address bar.
Also when viewed on my iPad in landscape mode the same thing happens.
This only happens because of the number of menu items.
It would be nice if there was a way for the OverlayMenu to have a Y offset
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Dec 16, 2025 6:01 pm
by crispy68
You will need to add some top margin. So, you will need to alter the code I gave before like such:
Code: Select all
<style>
#indexOverlayMenu1-overlay ul{overflow-y:auto;max-height:calc(100vh - 20px);margin-top:20px;}
</style>
This will add a 20px margin to the top. Change this to whatever you need. The height is then calculated by subtracting it from 100vh so as to not cause additional vertical scrollbars. Just make sure whatever you subtract from 100vh is the same as the top margin number (ex: if you make the margin 35px, then it should be 100vh - 35px)
Re: OverlayMenu Cutting Off (hidding) Top Menu Pages
Posted: Tue Dec 16, 2025 6:33 pm
by dnlyko
Thank you very much, I really appreciate your support. I just had to change the value from 20 to 50. All good now !!!
