For some reason the 100vh does not work with the slider in Safari: https://preview.webflow.com/preview/sternschild?preview=3e08105a0482ef1b1f48b32ae581c3f5
but it does work in Safari with all other (no slider) pages with the same 100vh setting (e.g. http://sternschild.webflow.io/leistungen/empfangsdienst)
Thank you Anna. But when I do this the vh100 of the parent div actually does not work any more (on Chrome for instance) - I need to scroll to reach the bottom of the hero slider.
But then, maybe this issue would not appear on bigger screens?
From what I understand you would like the Hero and Navbar all to be in the browser screen without scrolling … you are able to scroll down on the hero section because although your hero is set to 100vh, the Navbar (which is on top of the hero) is still set to a pixel height, as a result, dragging the hero down by default.
Solution: Give you navbar a fixed VH height (for example 20vh), then give your hero a fixed vh height for example of 80vh height. This should fix your problem.
Hope this helps. 
You understand correctly, but this approach would stretch the navbar according to the screen size, wouldn’t it? I would like to keep the navbar height the same across all screen sizes.
Yes, but if there will be no fixed vh height on the navbar, the hero can never have the correct height layout for the fullscreen of the monitor without scrolling, as a result, you will never get the coreect look you are looking for.
Hope this helps. 
Hm, well, if you check this page: http://sternschild.webflow.io/leistungen/empfangsdienst the hero image does fit in the full screen properly, without vh for the navbar, on all major browsers.
The problem appears only on the main page, where there’s a (hero) slider widget on place of the hero image.
Can you give me the read only link of that page so I can take a closer look of the elements used to make that in Webflow?
Thanks!
You can follow the public share link in my original post, then go to the “Leistungen” folder and select any of the pages there, the header is the same for all of them.
PS: As far as I know there’s no public share link per page?
Oh, they just used flexbox for this, I would just carefully look at the page and then just recreate it using the exact settings they applied, or if you want it to be even easier, make the hero a symbol, as well as select the navbar (which is already a symbol), and simple drag and drop them into your screen, and if you would like to edit them from there, simple explode the symbols.
Hope this helps.
As far as I know symbols cannot be nested?
Well, I did construct the homepage header in the exact same way I did in those pages, but unlike them, the homepage does not display properly in Safari. I guess it is an issue with flex?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
