bootstrap change active button on navbar, CSS, HTML

Question

Hello I am new to html and CSS, I am using bootstrap to create a website. I am looking to change the color of the active button on the right nav bar. Also would like to change the text colour when hovered over I've seen a few examples, but I am unable to apply it to this example. Thanks in advance.

HTML:

<div class="Menu">
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-  toggle="collapse" data-target="#navbar">
          <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-left" href="http://www.website.com"> <img src="Logo.png" alt="LOGO">
        </a>
      </div>
      <div id="navbar3" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

CSS:

navbar-right{
    padding-top: 35px;
}

img {
    padding-top: 17px;
    padding-left: 17px;
}

.jumbotron {
    padding-top: 10px;
    padding-bottom: 48px;
    border: 2px solid black;
}

.navbar-inverse .navbar-nav > li > a {
    color: green;
} 

.navbar3 > .navbar-nav .navbar-right>.active {
    color:red;
    background-color:yellow;

}
.navbar3 > .navbar-nav .navbar-right>.active > a,
.navbar3 > .navbar-nav .navbar-right>.active > a:hover,
.navbar3 > .navbar-nav .navbar-right>.active > a:focus{
    color:red;
    background:blue;
}

You will probably find what you are looking for here : http://stackoverflow.com/questions/28712267/how-to-change-the-button-color-when-it-is-active-using-bootstrap — Majd, Aug 15 '16 at 09:28
Always use code snippet or JSfiddle to show your working code. — Rajat Garg, Aug 15 '16 at 09:31

Minal Chauhan · Answer 1 · 2016-08-15T09:48:35.210

1

Try this css to over right Bootstrap css rules:

.navbar-inverse .navbar-nav>.active>a{
  background-color:red
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
  color:red
} 

#navbar3 .navbar-nav>.open>a, #navbar3 .navbar-nav>.open>a:focus, #navbar3 .navbar-nav>.open>a:hover{
  background-color:red
}

Here is working Demo: https://jsfiddle.net/8ryewrn3/2/

edited Aug 15 '16 at 09:48

answered Aug 15 '16 at 09:28

Minal Chauhan

6,025
8
21
41

Thanks that solved the hover problem, I have added a screenshot and the problem was the black colour on the active button. – txm101 Aug 15 '16 at 09:41

score 1 · Answer 2 · answered Aug 15 '16 at 09:39

You have some wrongs in your css when fixed it will work fine:

You are using .navbar3 and it isn't a class it is id so you should use #navbar3
you also have a space between .navbar-nav and .navbar-right but it should not be a space .navbar-nav.navbar-right not .navbar-nav .navbar-right

so your CSS must be like this :

#navbar3 > .navbar-nav.navbar-right>.active > a,
 #navbar3 > .navbar-nav.navbar-right>.active > a:hover,
 #navbar3 > .navbar-nav.navbar-right>.active > a:focus{
    color:red;
    background:blue;
}

This will change the active button , to change the hover you should do it like this :

#navbar3 > .navbar-nav.navbar-right>li>a:hover{
  color:yellow;
}

Here is working Demo : https://jsfiddle.net/o2dr4w8e/

bootstrap change active button on navbar, CSS, HTML

2 Answers2