user46688 user46688 - 4 months ago 15
HTML Question

how to change hover color in my Bootstrap 3.3.6 navbar?

I must be doing something unusual, as the related questions and answers I've found so far on Stack Overflow aren't working for me. I'm new to css, so the answer may be obvious.

I prefer the solution to avoid

!important
, and if possible, only apply to the site header (e.g. not anywhere else on the site; that is, only apply to content inside block with
id="my-block"
).

Also, would like solution to work for all levels in the nav (first, second, etc.).

This is what I tried:

.navbar .navbar-default > li > a:hover {
background-color: #FFFF00;
color: #FF0000;
}


Here's my code that runs along the top of my site:

<nav id="my-block" class="navbar navbar-default navbar-static-top navbar-default-siteheader navbar-inner-siteheader">
<div class="container">
<div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-right">

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu1<span class="caret"></span></a>
<ul class="dropdown-menu">
...
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu2<span class="caret"></span></a>
<ul class="dropdown-menu">
...
</ul>
</li>

</ul>

</div>
</div>
</nav>

Answer

Change

.navbar .navbar-default > li > a:hover

to

#my-block.navbar li a:hover