All geek questions in one place

Cannot change highlight color in navigation bar using Materialize CSS

I want to change the bg hover color in the navigation bar to another using MaterializeCSS, the default effect just makes the backlight darker, I need to change this backlight to a different color, like white.

When the color of the navigation bar is black, the effect of highlighting or hovering is not displayed.

I can change the background color of the navigation bar, the color of the text, but I can’t change the background highlight color, any ideas?

thank you in advance

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<style>    
nav ul li a{
  color: orange;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper black blue-text">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

In jsbin here :)

+5
source share
1 answer

Just add this rule to your css:

nav ul li:hover {
   background-color: white;
}

. : http://jsbin.com/yemegejeye/edit?html,output it white.

+6

Source: https://habr.com/ru/post/1626048/

More articles:


All Articles