Changing background color of navigation tabs

Changing background color of navigation tabs
0

#1

My code is:

I want to change the background color of the tabs to green when theyre hovered over.Please tell me the css/jquery


#2

it didnt show the code dor some reason. Ill try again.

/*<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Portfolio</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
          </div> */

#3

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.


#4

The following works:

.nav a:hover {
  background: #39EE49 !important;
}

The “!important” is what’s important. :wink:


#5

thank you BenGitter and thank you icartusacrimea. can u tell me why !important is important?


#6

That way other CSS (most likely Bootstrap) can’t override the value (unless using !important themselves).


#7

OK i just added scrollspy to the body and while the background color of the tabs change when i manually hover over them, it doesnt change when i scroll down to their respective ids.

///

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">///

thats the html