Full height hero section with navbar
What would be the best way to design a hero section that, together with the navbar, takes the entire page height?
Im thinking about doing it by explicitly sizing the navbar, and using calc to subtract from 100vh of the hero section height, would this work? I don't know how i feel about explicitly sizing the navbar height
3 Replies
If you can make sure nothing on the navbar will wrap and expand its height (making sure to switch to mobile hamburger menu when the menu items start running out of space or even just starting with a hamburger menu ) , I think it’s fine to set a minheight of the hero to 100vh minus navbar height. You could also wrap both the nav* and hero in one container and set that to min height of 100svh w fallback of 100vh.
thanks! That was the two possibilities i was thinking about, went with the first, seems to be working ok so far
I just have to make sure it doesn't wrap like you said
thank youuu
Remember to implement svh if you need to work on mobile browsers too