Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Navbar color gets grayed out

See original GitHub issue

Hi, here is the problem I’m having: on small screens, that is when the Navbar becomes a SideNav, the background color gets very dark. This happens when I change the default color for the Navbar, for example: <Navbar className="light-blue darken-4">.

Below the screen of the resulting Navbar:

screenshot

Any suggestion/workaround?

Issue Analytics

State:
Created 6 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

pleopardicommented, Jun 30, 2017

Made the tests: #sidenav-overlay { z-index: 1; }, .navbar-fixed { z-index: 999; } and .navbar-fixed { z-index: 998; } work just fine on my web app. I’m going with the first one now. #sidenav-overlay { left: 300px; } and #sidenav-overlay { margin-left: 300px; } work but the visual effect when opening the sidenav is not very pleasant.

Anyway, I hope they will soon update the materialize library, this bug is almost 8 months old!

0reactions

sujanhbgcommented, Sep 14, 2021

put #nav-mobile or .side name outside of #navbar-fixed