bootstrap bootstrap on navbar, CSS, HTML

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 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/