Change Bootstrap's hover color on nav links?
13,235
Try this https://jsfiddle.net/fzektrm3/3/
Add this to your css, your css must be included after boostrap
css
.nav > li > a:hover, .nav > li > a:focus {
background-color: #EF92A5;
text-decoration: none;
}
Author by
Dylan Bailey
Updated on June 04, 2022Comments
-
Dylan Bailey almost 2 years
I have been trying to change the grey color that pops up when you hover over a nav link, with Bootstrap. Sadly, I can't seem to get it working. (I'm only including this HTML, since stackoverflow won't let me post my jsfiddle link, without it.)
<header role="banner"> <nav id="navbar-primary" class="navbar" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav nav-links"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Menu</a></li> <li><img id="logo-navbar-middle" src="images/logo.png" width="200" alt="Logo Thing main logo"></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header><!-- header role="banner" -->
Jsfiddle has all the html/css: https://jsfiddle.net/fzektrm3/2/
I just can't seem to get rid of that ugly grey color, when hovering over the links. Any help would be greatly appreciated!
-
Dylan Bailey over 8 yearsYou both helped immensely. Thank you!