Streaming live at 10am (PST)

Create full screen hero slider that goes in the background


#1

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 : http://www.leftproductions.com/ (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.
Augustin


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


#2

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.

Regards,
Anna


#3

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