Thanks @joejola ! I tried implementing this change, but it only created another issue involving the intro page load animation. The background image of the hero section, which slowly scales down from 1.1x to 1.0x over 3 seconds, now awkwardly pokes out over top of the section beneath it at the beginning of the page load animation (see screenshot below).
I’m guessing this is because the z-index is no longer higher than the section above it, but honestly I have no clue?
Any guesses as to how to fix this without going back to the original issue?
Hey @joejola just wanted to check-in and see if you were able to look into this additional issue. Please let me know whenever you get a chance (or anyone else viewing this!). Thanks!
Hey @lecksus, I couldn’t recreate that issue (see this Dropbox Capture). But z-index shouldn’t cause that, the gap should be related to positioning or sizing.
As long as .gradient-and-wave is positioned absolutely on top of your background image you should be good.
Don’t forget the original problem is that your nav and top section are the same z-index. They only need to be 1 z-index different. But as you can see in the video, I’ve even reset all the z-indexes on your sections and it still worked as expected.
That’s strange it’s not showing up on your end @joejola . Check out this screen record to see the issue that I’m seeing.
I have it set so that the z-index for the nav is 1 value higher than the z-index for the section underneath the hero/top section. The loading animation causes an overflow of the hero background animation on top of the section beneath it. This is actually expected because the animation brings the scale from 1.1 down to 1, but it should be happening behind the section beneath it and not on top of it. You know what I mean?
