マテリアライズドを変更するCSS navbarアクティブなカラー

Question

マテリアライズCSを使用してnavbarを作成していて、ホバーするときにアイテムの色を変更するコードを追加しました。しかし、私が授業に「アクティブ」というクラスを追加すると、navbarアイテムの背景色とテキストの色を変更する方法がわかりません。

<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> 

マイ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; 
} 

私はそれを置くと、それはOK取り組んでいるが、私は、アクティブとしてアイテムを設定すると、それはデフォルトの背景色と色を使用しています。

Answer 1

アクティブは、マテリアライズCSSで定義されたクラスです。

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

あなたは、色を変更したり、このクラスをオーバーライドすることで、他のルールを指定することができます。これが役に立たない場合は、コードをフィドルに入れてリンクを共有してください。