Streaming live at 10am (PST)

Navbar over Slider doesn't work

Hey guys,

I have a problem with a Vertical Navbar that doesn’t work as long it is over a Hero Slider. Somehow it works perfectly in the preview mode, but isn’t working on the published page. I thought there might be an element which is lying above the navbar, but I just can’t find anything. I hope you can help me.

Thx
Joe


Here is my site Read-Only: https://preview.webflow.com/preview/no-work-on-monday-website?utm_medium=preview_link&utm_source=designer&utm_content=no-work-on-monday-website&preview=fc80987566978f0f6f67e3ca79e5dcf6&mode=preview

And here is the link of the published site: https://no-work-on-monday-website.webflow.io

Hi Joe and welcome on the forum!

Good job providing both read only link and published link!

Your Navbar elment is Positionned but has no z-index value.

Your DIV3 element that’s containing the Lottie anim is also positioned, expand all the way in the viewport, and has a z-index value of 3, making it cover the navbar.

So that’s already one potential issue. Let’s not dive further into your problem, set a high z-index value on your Navbar, like 100 or 1000, anyway higher than any other value you’ve entered so far in the page.

Edit: did you just figure it out yourself? It works now on your published link.

Hey Vincent!

Thank you so much for your very quick reply! :slight_smile: Actually my navbar has a z-index of 1000 already… Anyway I’ve no entered a value of 99999999999999 and restricted the DIV3 element to 90vw so that it’s not covering the navbar.

But unfortunately the problem still remains. :frowning:

Try having it on the left just to see…let me know

And don’t go over 2 billions for z-index, it’s virtually unlimited but the maximum for a 32 bit value is a bit more than 2 billions (2147483647), so having it higher is a risk for the browser to not interpret it at all.

Ok, i put the navbar on the left and set the z-value to 9999. Still the same problem somehow.

Could have something to do with the little yellow exlamation mark next to the z-value? It says “Set the body element’s position to relative” (which isn’t possible afaik).

No the thing you’re refferring to is broken at the moment I believe.

Sorry I’m not comfortably installed behind a computer to try to tackle this at the moment.

Still having a look

Are you sure it’s not working on the default desktop breakpoint? It does for me. passed it, on the higher breakpoint above 1440, it doesn’t work. Please check this?

1 Like

Hey Vincent!

Thanks so much! Your lust point was the hint I needed. The DIV3 element had a high z-value in the desktop solution. No it’s fixed! :slight_smile:

I’m still new to webflow and sometimes I mess things up in the different breakpoints… Thank you so much for your help! You’re awesome!

1 Like

Great!

Don’t forget that’s it goes both ways: descending from the desktop to mobile, ascending the other way. A piece of advice before you master it a bit more: even if you have a clear view of your bigger breakpoints, refrain to add any before completing the site. Finish the site, fine tune it, do the downwards responsivity, then only add some more breakpoints above desktop. It will be easier that way.

You’re welcome!