Customizing Navbar with backdrop-filter

[aozaki-kuro]

I bumped into some problems with the navbar customization and looking for help 😢

Custom CSS

I added extra options for .navbar

.navbar {
    ...
    background: rgb(255 255 255 / 65%);
    backdrop-filter: blur(20px);
}

---

Before

After

---

Mobile Navbar

It is working great on desktop but the mobile navbar got affected like this

I have upgraded to 2.0.0-beta.17 and the problem still exists.

I'm not sure how to solve the problem, any help will be appreciated 😭

[slorber]

It is impossible to help if you don't provide a repro showing all your CSS customization + a live version of your site to inspect current CSS

If I apply the CSS you gave to the Docusaurus site, I don't end-up with the issue you reported here, so it is very likely produced by other CSS rules you added

[aozaki-kuro]

I tried the css code on docusaurus.io official page and it end up the same way, click the "三" on the upper left corner, the hamburger menu became weird.

[slorber]

I see.

I don't think backdrop-filter should affect the layout but it clearly does here, and I won't be able to tell you why.

I can reproduce this issue on Chrome + Firefox (need to enable the backdrop filter flag)

Safari does not have this behavior 🤷‍♂️

[udoyhasan]

@aozaki-kuro I was also facing the same issue but I manage to fix it. You can see my answer on issue #6996. Hopefully, it will solve your issue too :)

[aozaki-kuro]

Thank you! That works great

[udoyhasan]

@aozaki-kuro you're welcome.