Navbar Links doesn't works because of a weird class generated by Webflow

[niccolomiranda]

Hello there,

I just finished to set up my navbar for touch devices and when I test this out “nav links” doesn’t work. I tried to inspect the code to figured out which was the problem and I find out an auto-generated class by Webflow immediately below to the Nav whit these properties: <div class="w-nav-overlay" data-wf-ignore="" style="height: 812px;/* display: block; */"></div>

Here the overview of webflow and a quick video where I show the issue. If I delete that class everything works fine. Any advice on how I can fix it?

VIDEO: https://cl.ly/fe33ba5e48ed
Screenshots:

---

Here is my site Read-Only: https://preview.webflow.com/preview/fatfatfatfestival?utm_source=fatfatfatfestival&preview=4d9fa7ed305cc12187c2b396c914b526

[1]: http:// https://fatfatfatfestival.webflow.io/artists

[PiterDimitrov]

Hey @niccolomiranda

I think It’s not Webflow. The problem can be solved with z-index. The first problem I see is using -1 z-index.

I don’t like using the Webflow components. Navbar, sections ect… Doing everything from scratch is better in my opinion.

I have a solution in mind, but maybe not the best one.

Never mind Can you try adding custom css

.w-nav-overlay {
 display: none;
} 

Hoping everything will work fine

[niccolomiranda]

Hello @PiterDimitrov and thanks for the quick response dude. Unfortunately I tried to delete the z-index and the “bad UX” solution using display: none but the value doesn’t read by Webflow as primary.

Any ideas? that’s crazy!

[PiterDimitrov]

What about

.w-nav-overlay {
 display: none!important;
}

I have another solution in mind, but I need to record a video. Give me some time

[niccolomiranda]

yesss! it works. thanks a lot @PiterDimitrov

[PiterDimitrov]

Works on my end too

The other solution is making some changes to the design structure. I can show you if you want. Creating everything from scratch is better.