CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Saurabh Nair
Saurabh Nair

Reputation: 11

bootstrap header li background color

This the code please let me know how can i change the LI backgorund color on hover

 <nav class="navbar navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-codextro-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                 </button>
                <a class="navbar-brand" href="#"><img src="../logo.png" ></a>
                </div>
                <div class="collapse navbar-collapse navbar-right" id="bs-codextro-navbar-collapse-1">
                    <ul class="tabs nav navbar-nav">
                        <li><a href="#">WHO WE ARE</a></li>
                        <li><a href="#">WHAT WE DO</a></li>
                        <li><a href="#">PORTFOLIO</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </div>
            </div>
        </nav>

this is the CSS

.navbar .navbar-nav > li > a:hover{background-color:none; }

Upvotes: 1

Views: 2866

Answers (4)

ckuijjer
ckuijjer

Reputation: 13814

The css property background-color: none is invalid, as the color none doesn't exist. You can change this to background-color: transparent to make it fully transparent.

I've opened Chrome's DevTools to see what styling exists on the menu items. The :hover pseudo selector is used on the <a> inside of the <li> instead of on the <li> itself. Bootstrap uses the selector .nav>li>a:hover to set the background color.

In the example below I've simply overwritten this selector (and the one used for :focus). It is a better idea to scope it to the .navbar-nav by setting .navbar-nav .nav>li>a:hover as otherwise it would impact all .nav structures.

An even better approach would be to take a look at how Bootstrap handles styling the navbar. It does this by adding .navbar-default or .navbar-inverse to the .navbar. Perhaps it's a good idea to look through Bootstrap's source code and create your own .navbar-... styling class.

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

.nav>li>a:hover,
.nav>li>a:focus {
  background-color: transparent;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-codextro-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="bs-codextro-navbar-collapse-1">
      <ul class="tabs nav navbar-nav">
        <li><a href="#">WHO WE ARE</a>
        </li>
        <li><a href="#">WHAT WE DO</a>
        </li>
        <li><a href="#">PORTFOLIO</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Jimmy Khanh
Jimmy Khanh

Reputation: 119

.navbar-nav li:hover a{background-color:none;}

or

.navbar-nav li:hover {background-color:none;}

Upvotes: 0

Sathish
Sathish

Reputation: 2460

 .tabs li:hover{
    background-color:red;
    }

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Unless there is no other css overwriting your css rules this should work:

If the background color is assigned to li element:

ul.navbar-nav > li:hover {
    background-color: #333; // your color
}

If you want to target a element:

ul.navbar-nav > li:hover > a {
    background-color: #333; // your color
}

Upvotes: 0

Related Questions