Menu
I want to change the hover bg color in a nav bar for another one using MaterializeCSS , the default effect just make the highlight darker, i need to change that highlight to another color like white.
When the navbar color is black, there is no highlight or hover effect.
I can change the bg of the nav bar color, the text color 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 :)
841
You can change color of your navbar by just adding name of color as a class you can pick colors from Colors. If you want the color header of the menu to be same as navbar use . navbar-full class with your <aside> tag.
To change the color when hovering in CSS, you will use the CSS selector called :hover . The :hover is a CSS pseudo-class that will select the HTML element when the user hovers over with the mouse. The hover selector will work on almost all HTML elements.
As a reminder nav wrapper templates are templates that typically produce the header and footer markup that wraps around the content of each page. This is done so that you have don't have to handle all this output in each individual page template.
Just add this rule to your css:
nav ul li:hover {
background-color: white;
}
It changes the background color of the item on hover. In this example: http://jsbin.com/yemegejeye/edit?html,output it's white.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
