Navbar moves behind content at the last section of page

[annikaschneider (Annika)]

Hi all – I hope someone can help me with this problem:

I have a navbar that fades out when I scroll down, and appears when I scroll up. It works perfectly fine for 90% of the page, but as soon as I get to the last section of my site, the navbar doesn’t fade out anymore but instead is visible and sits behind the content; see screenshots:

Here it works fine:

Here it sits behind all content in that section:

I checked the z-index but everything seems to be fine on that end. Any ideas what could cause this?

Thanks,
Annika

---

Here is my site Read-Only: Webflow - FlexPay Website

[knk (Keiran)]

Hi Annika,

I noticed some unusual behaviour with the nav also.

Can you also share a published link to observe the site (on the webflow.io domain)

What I noticed is:
If I open your read-only link, and scroll the web page, the navbar acts as ‘sticky’, constantly on top of all content, all the way to the bottom of the page.

However, if I toggle from preview mode to designer mode and back to preview mode, the nav bar acts as you intend, it scrolls out of sight and returns depending on scrolling the page.

Very strange??
Keiran

[annikaschneider (Annika)]

Hi Keiran – here’s the public link: https://flexpay-website.webflow.io/

Thanks for looking into this!

[knk (Keiran)]

Hi Annika,

thanks for the link.

Everything seems to be working correctly. Am I missing something?

Keiran

[annikaschneider (Annika)]

Hi Keiran,

have you tried this on mobile as well? Does it work fine there on your end? I don’t know why I’m seeing this issue on my end and have heard users experience the same, but it works on your end.

What browser are you testing this with?

Thanks again for your help,
Annika

[knk (Keiran)]

Hi Annika,

I have tested on Chrome, Opera, Firefox and Edge (all latest versions), on both PC and mobile (Landscape/portrait) and everything was working ok.

However…
I did notice a small glitch that replicated the issue you described as I randomly ‘rapidly’ scroll up / scroll down on mobile.

I tried to replicate the issue a few times on PC (different viewport sizes) and phone. Was quite a challenge to replicate it, but I got it again on phone portrait.

Definitely would not be a ‘standard’ UX experience to replicate.

Anyway, I noticed that it would occur scrolling the ‘Wider Wrapper’ element. There is a ‘z-index’ of 1 on that element, do want to remove that index and republish, and I’ll see if I can replicate the issue again.

Keiran