CODEWITHSUNDEEP
htmlcssmaterialize
Alberto Timóteo
Alberto Timóteo

Reputation: 1

Changing Materialize CSS navbar active color

I'm creating a navbar using MaterializeCSS and I added some code to change the color of the items when hover. But, when I add a class "active" to the li I don't know how to change the background color and the text color of the navbar item. 

 <nav class="navbar-fixed">
     <div class="nav-wrapper">
        <a href="lobby.php" class="brand-logo center">
            <img id="logo" src="images/logo.png"/>
        </a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="left hide-on-med-and-down">
            <li><a href="#">Item1</a></li>
            <li class="active"><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
        </ul>
        </div>
 </nav>

My CSS:

nav.navbar-fixed {
  background: white;
  border: none;
  box-shadow: none;
  height: 70px;
}
.navbar-fixed .nav-wrapper {
  background: white;
  margin: 20px;
}
.navbar-fixed .nav-wrapper > ul > li > a {
  color: #faa61a;
}
.navbar-fixed .nav-wrapper > ul > li > a:hover {
  color: white;
}
.navbar-fixed .nav-wrapper > ul > li:hover {
  background-color: #faa61a;
}
.navbar-fixed .nav-wrapper .brand-logo img {
  height: 45px;
}
.navbar-fixed .nav-wrapper .button-collapse i {
  color: black;
}

When I hover it, it's working OK, but when I set an item as active, it's using its default background-color and color.

Upvotes: 0

Views: 6346

Answers (1)

Shruti Agarwal
Shruti Agarwal

Reputation: 897

Active is a class defined in materialise css.

nav ul li.active { background-color: rgba(0, 0, 0, 0.1); }

You can change the color or specify any other rule by overriding this class. If this doesn't help, Can you please put the code on fiddle and share the link?

Upvotes: 1

Related Questions