Adding a white background to bootstrap navbar items - html

Question

I am working on making a personal site by playing around with bootstrap and I have a transparent navigation bar that looks like this:
Written like this:
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#home">Jon Snow - Knows Nothing</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
About Me
</li>
<li class="page-scroll">
Work
</li>
<li class="page-scroll">
Blog
</li>
<li class="page-scroll">
Contact Me
</ul>
</div>
</div>
</nav>
This how the CSS is setup with different profiles for desktop and mobile sites:
#media only screen
and (min-width: 768px) {
.navbar.navbar-default {
padding:6px;
background: rgba(0, 0, 0, 0);
border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
}
#media only screen and (max-width: 767px) {
.navbar.navbar-default {
background: rgba(0, 0, 0, .5);
border: none;
}
.icon-bar {
background-color:#ffffff !important;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
I am trying to add a highlight on hover and focus to my navbar item that is supposed to look like this:
I tried variations of this but no luck:
.nav li > a {
background-color:#000000;
color: #ffffff;
}
Also here is fiddle: JSFiddle

Answer 1

This may work!
.navbar.navbar-default .navbar-nav li a:hover {
background-color:#000000;
color: #ffffff;
border-radius:5px;
}