Collapsed menu in Navbar: removing transparent margin from list elements? - html

Question

I've been searching for a few hours on this and poured over the bootstrap code to no avail so here I am! I set my navbar to collapse at 991px and, once viewed, the list elements have the background color I wanted, but when you hover over them there's apparently a transparent margin for each list element. How would I get rid of this margin, i've been messing with navbar-nav li a and my links in the navbar are H5s so also navbar-nav li a H5. The last list element is a dropdown link and in the media query when clicked it remains as if hovered over so I'm assuming there's a focus tag with it I just can't think exactly how to fix these two things (still very new to CSS/Bootstrap if you didn't know). Here is the HTML below and any help is very much appreciated!
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><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="#">Logo</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right links">
<li><h5>How We Work</h5></li>
<li><h5>Abous Us</h5></li>
<li class="dropdown"><h5>Course Subjects</h5><span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
And here is the CSS (I included the whole file, but I'm pretty sure the problem will have to do with the media query):
body{
padding-top: 120px;
background-color:#34A0CD;
}
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#topFixedNavbar1{
height:120px;
}
.links{
height:120px;
}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
#media (max-width: 991px) {
.dropdown li a{
line-height:30px;
}
.collapse.navbar-collapse{
width:100%;
}
.links li a{
width:100%;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav li a h5{
line-height: 30px;
background-color: gray;
color: #F1E9E9;
}
.navbar-nav li a{
background-color:gray;
width:100%;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}

Answer 1

I forked into a Fiddle that was created with Bootstrap in mind and threw in your code so I think I might have reproduced the issue. The problem didn't seem to be margins at all but background color that is set to transparent on hover/focus by default in Bootstrap.
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: rgb(51, 51, 51);
background-color: transparent;
}
I tested out just a simple modification to this with to override the default styles and it seemed to work.
.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus{
background-color: gray;
}
Here's a demo
Obviously you can modify that however, but that should put you on the right track.