Streaming live at 10am (PST)

Disappearing NavBar Issue

Hey all.

My fixed navbar disappears behind the first section following my header/hero section and then reappears again after passing that section.

What’s happening here and how can I fix it (and by fix it, I mean how can I keep the navbar above ALL of the page’s content 100% of the time).

Here’s the navbar looking fine at the top of the page:

And here’s the navbar disappearing behind the first section (after the header/hero section):


Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&pageId=60e5fd79d2c0dd00a6fed125&workflow=preview

The Z-index of .section-page .top is the same as your nav. Change the z-index to something smaller than 9999.

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?