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:

  1. 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.
  2. By setting the height of a section to 100vh, you are essentially making it take up the full height of the viewport.
  3. When the section takes up the full height, it will push down any elements that come before it, including the navigation bar.
  4. The navigation bar will be pushed down below the section, maintaining its original height, but its position on the page will change.
  5. 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.
  6. 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:

  1. 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?
  2. Can I adjust the height of the navigation bar in Webflow without affecting its position on the page?
  3. Is it possible to create a scrollable section with a fixed navigation bar in Webflow?