I am testing a layout and came across something that I couldn’t solve, and I’m slowly wondering wether it’s even possible.
Please ignore all the mess, I’m trying Stuff out
Beware, it’s super complicated or at least I made it sound like it is!
The logo consists of two parts. In order to keep the space between them always the same, they are together in a div Box, and that div box is given a fixed position at the bottom.
I added an animation, which moves the upper part of the Logo outside the window while I’m scrolling.
So basically, when I arrive in the ‘Line-up’ Section of the website, the upper part of the logo is no longer visible, but the div box that holds the two logo elements is still the same height. Since that div box is a fixed element, it’s ‘above’ every other content (so the z-index is higher, if I understood that right).
When I go to the Line-up Section, I want every name to be a linked text to the artists page (first name as example). The div box from the logo seems to block the linked text and it’s hover effect without even being visible.
Is there ANY way I can fix this? I thought about custom code, where I could change the z-Index of my Line-up section and make it higher than the div box. That would temporarily hide the logo underneath but it would appear again when the section has ended. Just a thought, I have no idea how that code should look.
Any help is suuuuuper appreciated!!
Here is my site Read-Only: https://preview.webflow.com/preview/rw9?preview=e23f857f0062c3c8909f89a1db6f915a