Nav-item backround color in Chrome

I am having an issue with Chrome and the list items background. I set the navbar color with some transparency and a backdrop blur effect and I get a solid bg color.

I created the class nav-item background set as transparent and !important. I also created a nav-link class with tranparent bg and !important

I tried several classes and I cant get it working properly. Safari, firefox and opera are working as expected.

Anyone has the right class to solve this?

Thanks!

Didn’t happen to me so far. I have used that on my own website, which is still a work in progress:

I don’t have chrome, but I use Brave, which is based on chrome, just without sharing data with google. Works there too.

I set a transparent background color to one of the swatches and applied that to the navigation bloc. I then used a class bg-blur to only add the background-blur, so I can use it for the footer and other items as well.

I make the same thing, but my class was named .nav and that caused the issue. Changed the class name and i’ts working fine.

I really don’t know why affects other li elements when I set them in other class and marked as important.

Yeah, .nav classes I better do not touch. Preferably I try to avoid messing with Bootstrap classes all along.

1 Like