Using 100vh for sections with a nav

Design help General
1

If I have a nav and section below it, and I make the section height 100vh, what does that mean for the nav?

Is the height of the section effectively 100vh minus the height of the nav?

Here is my site Read-Only: https://preview.webflow.com/preview/better-meetings?utm_medium=preview_link&utm_source=designer&utm_content=better-meetings&preview=af3ed6259c9035a98b41b0b49117985f&pageId=605315ec4351b36d5782a32d&workflow=preview

2

Hi. If your nav isn’t set to fixed or absolute and it’s not in your section, it will make your section longer so your section won’t be fully visible. For example, if your nav has a 60px height it’ll be 60px+100vh.

3

Use custom code and CSS Calc. If your navbar is 60px, then:

<style>
.yourclass { height:calc(100vh-60px) }
</style>

Use this code in a Custom Code Embed element so that you can see the effects right in the Designer. Place that Embed inside of your navbar symbol so it possibly affects all the pages.

1 Like