Ninetiger blog

-- my reminder

How to change Bootstrap navbar active and non-active menu item background color

The Bootstrap (v3.x) navbar example can be find here: http://getbootstrap.com/components/#navbar

Use the Pills verson as the base:

<ul class="nav nav-pills" id="topMenu">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

This an Id for css:

#topMenu > li.active,
#topMenu > li.active :focus {
    border-bottom: 4px solid #ff9900;
    margin-bottom: -4px;
}

#topMenu >li.active :hover { /*ensure hover not change to ligthgray if it's the activeLine'*/
    border-bottom: 4px solid #ff9900;
    margin-bottom: -4px;
}

#topMenu > li:hover,
#topMenu > li:focus {
    background-color: transparent;
    border-bottom: 4px solid lightgray;
    margin-bottom: -4px;
    -ms-border-radius: 0;
    border-radius: 0;
}

#topMenu > li > a {
    padding-bottom: 0;
    color: #337ab7;
    background-color: transparent;
}

Comments:

Back to top