how to change hover color in my Bootstrap 3.3.6 navbar?

Question

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>

Possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) — vanburen, Jul 15 '16 at 04:32

score 2 · Accepted Answer · answered Jul 15 '16 at 04:20

2

Change

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

to

#my-block.navbar li a:hover

answered Jul 15 '16 at 04:20

Wim Mertens

1,780
3
20
31

just simplify to #my-block li a:hover – Wim Mertens Jul 15 '16 at 04:26
My mistake about my earlier comment. I forgot to add the id to the top block. Wim's answer above works for the 2nd level. However, the first level text does change, but not the background. – user46688 Jul 15 '16 at 04:29
1

It should target all in
. Do you have any overriding css?

Wim Mertens

Jul 15 '16 at 04:32

I must somewhere. Because if I add `!important` to your styling, it overrides it and then all levels behave the same. Thanks. – user46688 Jul 15 '16 at 04:33

1

Can you post the link to the site? I can have a look for you. But Firebug inspector should be able to tell you as well – Wim Mertens Jul 15 '16 at 04:35

It's on localhost. I guess I can use firebug to inspect. – user46688 Jul 15 '16 at 04:36

score 1 · Answer 2 · answered Jul 15 '16 at 04:40

You can add your customize id in parent element like :-

<div **id="custom-nav-head"**> 
 <ul>
     <li>Link</li>
 </ul>
</div>

and then in css file, use below

**#custom-nav-head** .navbar .navbar-default > li > a:hover {
   color:     your color
}

if still its not work so then use !important property. Like :-

**#custom-nav-head** .navbar .navbar-default > li > a:hover {
   color:     your color **!important**;
}

score 0 · Answer 3 · answered Jul 15 '16 at 04:28

0

Try this:

a.dropdown:hover{
    background-color://whatever colour
}

answered Jul 15 '16 at 04:28

Kode.Error404

573
5
24

how to change hover color in my Bootstrap 3.3.6 navbar?

3 Answers3