Navbar fills page height no matter what

Running into an issue that I just can’t wrap my mind around for some reason and was hoping someone could assist!

I’ve got a hamburger menu (visible for all breakpoints) that opens from left to right, intended to have a width of 50vw and height of 100vh. The width part works fine, but regardless of what I do, the menu fills the page height all the way to the bottom, NOT 100VH as I had wanted. Even if I set the nav menu to a height of 100vh, it still continues to the bottom.

I’m aware of the “Menu fills page height” checkbox, and it is unticked (though it was at one point checkmarked.) I just can’t figure out what’s going on to make it fill the page height if the checkbox is unticked in the first place.

Even on the .webflow.io, when I try to manually change the height to 100vh in the Inspector, it automatically reverts back to a fixed pixel value if the browser height changes even by one pixel.

Hopefully someone has run into this issue before and knows what to do. Thank you in advance to anyone that takes a look!

Read-only link: https://preview.webflow.com/preview/no-fine-print?utm_source=no-fine-print&preview=e75466de02f68506bd6a5d7d429a5422

1 Like

Hey @mattvaru

I think the problem comes from the menu type > over left

The Webflow component has some settings applied and I can’t change them as well. Playing with position fixed, absolute, 0vh, 0px…nothing is changing the menu height.

I don’t use the Webflow components. Containers, sections, navbar ect. I will suggest creating the menu from 0. All custom with div blocks and interactions.

Piter :webflow_heart:

1 Like

Hey Piter!

I think you’re right as well — looks like there’s some inherited styles that I can’t override.

And that’s what I’m seeing and hearing… had no idea many folks didn’t use the pre-built nav component. I’ll rebuild it from scratch today. Thank you for looking into this!!

You can use max height of the menu-links div to set the height.

I ran into this same problem… After unchecking ‘menu fills page height’ the menu keeps filling the page hight. Seems like its impossible to reverse…

To me this is a bug. No matter what I try, I cannot get the menu to be the window height. Instead, it’s page height, and the reason is that Webflow adds a height into the HTML, which matches the page height:


It’s really stupid and I wish Webflow would fix it. But my experience with trying to contact Webflow support with issues is such that you don’t get anyone to tackle things like this right away. You’re only told that it’s been passed on and you wait forever…

So building from scratch might be one option, or add custom code, something like this:

@media screen and (max-width: 767px) {
.w-nav-menu {height: 100vh !important; position: fixed;}
}

Then you’re still left with the problem of the page being scrollable. So, a visitor might scroll while the menu’s open, and when they close it, the many button might be out of view. All things that should have been built properly by webflow, but I just reckon they don’t look back much at stuff they’re not actively developing.

1 Like

This is the only solution which has worked for me!

Thank you for preventing me from throwing my laptop out the window.