Hi, I’m having an issue with slider and position fixed. I’m working on a project that has a slider and each slide has a pop up. In order to create the popup, I’m setting a div block position fixed and cover the entire page. But, it’s not working. The div doesn’t cover the entire page. I’d really like to have the solution. Thanks in advanced.
Thank you very much for your help! Really, appreciate it. But, I have a question. Why the div doesn’t cover the entire view port. I set it top:0, left:0.
I see the problem you are facing and I assume it has to do with how WebFlow implements the slider. Here is a workaround that you could find a way to implement in your own project
1- Set the whole slider (‘.mews-slider’) to have a position of fixed
2- Decide where you’d like to place it (in your case that’s upper left)
3- Make sure that it has a high enough z-index.
This works because now you are operating on the slide as an element, so it behaves as expected. The way you’d implement this could be throw setting these styles on a class, and use javascript to toggle that class on and off when you’d like the pop-up to appear. Hope this answers your question!
Thanks again for your kind help. I’m really very happy for that. But, I’ve more content before the slider and they cover the viewport( 100vh). Then user scroll, they see the slider. But, if I set position fixed on the slider then, the slider won’t be under the first( Hero) section.
You don’t have to set the slider like that initially. Read my last part of the answer. You’ll need some knowledge of JavaScript, but you can set that styling (of the slider being positioned as fixed) to a class, then toggle this class on and off using JavaScript as needed.
Glad I could help! Please choose my last reply as the answer if it helped you, so that the forum stays tidy and whoever faces the same problem can later find the solution as well.
