OverlayMenu Cutting Off (hidding) Top Menu Pages

[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.

[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

[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

[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

[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>

[dnlyko]

Thank you crispy68
Now it works like a charm

[crispy68]

Do you have a link to the site to view what you're talking about?

[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

[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)

[dnlyko]

Thank you very much, I really appreciate your support. I just had to change the value from 20 to 50. All good now !!!