Streaming live at 10am (PST)

Create full screen hero slider that goes in the background

Hello everyone!

First post, so be gentle :wink: I want to create a hero slider that would go in the background, behind the nav bar and the heading, a bit like on this website : (which is our current company’s website) . It’s important that the heading doesn’t move when the slider changes.

Could you tell me how to do that? I couldn’t find threads that answer that. Thanks very much for your help.

Here is my public share link: LINK
(how to access public share link)

Hello Augustin (@LeftProductions)! Welcome to Webflow community :smiley:

For create such Hero section with slider on background I would suggest next steps:

  1. Create full screen section, give it position: relative
  2. Add slider inside the section, give it position: absolute, aligning: full, height: 100%.
  3. Add images and information to slides
  4. Add div to section (which will hold logo and arrow/link for scrolling), make it position: absolute, aligning: full, height: 100% and z-index higher than slider
  5. Add navbar to the section, give it position: absolute, aligning: bottom. Style it as you need.

For make effect when navbar stick to the top you will have to duplicate navbar, make it (copy) fixed position and display: none by default. Then create interaction for original navbar with scroll trigger, which will affect duplicated navbar and make it display: block.

Hope I was able to explain. Feel free to ask if you need more help.



This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.