In Webflow, if a section below a navigation bar has a height set to 100vh, how does this affect the height of the navigation bar?
Published on
September 22, 2023
When a section below a navigation bar in Webflow has a height set to 100vh, it affects the height of the navigation bar by pushing it down to accommodate the full height of the section. Here is a breakdown of how this works:
- The term "100vh" stands for 100 percent of the viewport height. This means that it will take up the entire height of the visible area in the browser window.
- By setting the height of a section to 100vh, you are essentially making it take up the full height of the viewport.
- When the section takes up the full height, it will push down any elements that come before it, including the navigation bar.
- The navigation bar will be pushed down below the section, maintaining its original height, but its position on the page will change.
- If the navigation bar has a fixed position or sticky behavior, it will remain fixed or sticky even after being pushed down by the section.
- It's important to note that if the section's content exceeds the viewport height, it will scroll within the section, without affecting the height of the navigation bar.
In summary, setting a section's height to 100vh in Webflow will push down the navigation bar to accommodate the full height of the section while keeping the navigation bar's original height intact.
Additional questions:
- How can I make the navigation bar stick to the top of the page even when the section below it has a height set to 100vh in Webflow?
- Can I adjust the height of the navigation bar in Webflow without affecting its position on the page?
- Is it possible to create a scrollable section with a fixed navigation bar in Webflow?