Nav Menu on tablet and mobile adds space to the page

Design help Layout & Design
1

I’m trying to make the Nav Menu that will open as a “Drop Down” on tabled and mobile. The menu works but whenever I open the menu in tablet or mobile something weird happens:

  • The overlay w-nav-overlay gets height 1774.15px directly in the style tag
  • Because of the above, a lot of white space appears below the footer

I spent a few hours trying to change the overflows, heigths to 100vh etc, but nothing works. It alsways forces the height to the random 1774.15px. Any idea what I am doing wrong?

Here is my site Read-Only: LINK

2

I “fixed” it by adding a custom code:

<style>
.w-nav-overlay {
	max-height: 600px;
}
</style>

But it’s not a solution as it may vary depending on number of links in the menu and also I have to repeat it on every page which is very annoying. If you have better solution please let me know.

I leave it unfixed in the home page so you can test on my read only link from the original post. The rest of the pages are “fixed”