How to set such a navigation bar?

[FEI (pengfeily)]

Like this site, initially at the bottom of the window, after a certain distance fixed on the window.How to do with webflow?

http://riazfarooq.webflow.io/

[StuM]

Hi @FEI

If you don’t get this answered/figured out beforhand - maybe bring this question up on @PixelGeek Nelson’s community Twitch stream - Friday - might be able to show how it’s done ‘live’.

Twitch

Stu

[mistercreate (create.something)]

@FEI Oh, good question.

To complete the fixed navigation - I created a custom navigation section that you can view at the following URLs:

• Webflow - Fixed Navigation Below Hero
• http://fixed-navigation-below-hero.webflow.io/

The steps I took are as follows:

1. Created a hero section with a height of 90vh
2. Created a navigation wrapper with position relative
3. Placed the “main-navigation” section in the navigation wrapper with a height:10vh, width:100%, and position:absolute
4. Then placed the “fixed-navigation” section in the navigation wrapper with a height:10vh, width:100%, and position:fixed to top.
5. Lastly, I used interactions to hide and display this fixed navigation when the user scrolls passed the hero section.
   
   

Hopefully this helps

Best regards,
Micah