CODEWITHSUNDEEP
htmlcsshyperlinktwitter-bootstrap-3
Dylan Bailey
Dylan Bailey

Reputation: 135

Change Bootstrap's hover color on nav links?

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!

Upvotes: 2

Views: 13421

Answers (3)

Dazzle
Dazzle

Reputation: 3083

Bootstrap 3

<style>
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
         color: white;
         text-decoration: none;
    }

    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus {
      color: white;
      text-decoration: none;
    }
</style>

Upvotes: 0

Lucky Chingi
Lucky Chingi

Reputation: 2258

That comes from default bootstrap CSS

add this code to your CSS file

#navbar-primary .navbar-nav > li a:hover{
    background:transparent !important;
}

Upvotes: -1

Nenad Vracar
Nenad Vracar

Reputation: 122027

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

Upvotes: 5

Related Questions