Streaming live at 10am (PST)

Viewport height needs to be 100 minus 60px


#1

I have two elements in my hero section - slideshow and a bottom nav bar. The nav bar will stick to the top of the screen when the user scrolls down the page. I have that part working, but I need to be able to fit the nav bar beneath the slideshow which is set at 100vh, which pushes the nav bar below the section container. I would like to set the slideshow to be 100vh minus 60px so the nav bar fits precisely at the bottom and will do so on any display.

Can someone show me how to do this? I haven’t found enough support in webflow documentation.


Here is my site Read-Only: https://preview.webflow.com/preview/wsf-microsite?utm_source=wsf-microsite&preview=b0a91b9a9eadd3a5f81177c0279ad582


#2

Currently Webflow does not support the css calc function son the only option is with custom code.

something like this

.yourClassName {
  height: calc(100vh - 60px);
}

#3

Have you tried adding 60px of padding to the bottom of your slideshow and setting your nav bar position to relative or absolute?


#4

Thanks, I tried adding this code with my class name inserted but not getting the desired effect. Also, I may have misspoken. The hero section is set at 90VH, and the slider should be set at 100% - 60px (not 100VH). Is the code similar then? I tried this but it didn’t work:
.hero-slider { height: calc(100% - 60px); }
I wasn’t sure where to insert the code but tried it in both the tag and before and neither worked.

Any further guidance?


#5

Thanks - I will try this, too.


#6

Is this What you’re trying to do? If not, could you be more specific with Class names . or include screenshots?


#7

Yes, that’s it - thanks! Working now.