How to add frosted glass effect without affecting the sidebar display on mobile phones

[kakomonn]

When I add frosted glass effect to the navigation bar, the sidebar on the mobile phone cannot be displayed correctly.
It turns into what it looks like in the picture, did I make a mistake somewhere in the css style below?

But it displays as expected on the desktop.

/* navbar */
.navbar {
  box-shadow: none;
  
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(12px);
  opacity: 1;
}

[Advait251206]

Based on the screenshot provided, the issue you are experiencing on mobile is a common side effect of how Docusaurus structures its navigation.

The mobile sidebar (.navbar-sidebar) is nested inside the main .navbar container. When you make the .navbar background transparent and apply a backdrop-filter, the mobile sidebar either inherits this transparency or loses its solid background cover. This causes the text of the sidebar to overlap confusingly with the page content underneath it.

The Solution

To fix this, you need to explicitly re-apply a solid background color to the mobile sidebar so the frosted glass effect only applies to the top navigation bar.

Add the following to your custom.css file:

/* Your frosted glass navbar */
.navbar {
  box-shadow: none;
  /* Using a slight opacity like 0.6 or 0.8 usually looks better for frosted glass than 0 */
  background-color: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Added for Safari compatibility */
}

/* Reset the mobile sidebar to be solid */
.navbar-sidebar {
  background-color: var(--ifm-navbar-background-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

Note for Dark Mode: If you support dark mode, hardcoding rgba(255, 255, 255, 0.7) will make your navbar white even in dark mode. It is highly recommended to use Docusaurus's CSS variables with an alpha channel, or set a specific media query/dark mode attribute for the background color:

html[data-theme='dark'] .navbar {
  background-color: rgba(0, 0, 0, 0.7);
}

---

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206