First post, so be gentle 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
For create such Hero section with slider on background I would suggest next steps:
Create full screen section, give it position: relative
Add slider inside the section, give it position: absolute, aligning: full, height: 100%.
Add images and information to slides
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
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.
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.