I am having trouble changing the color of the line break on the Twitter Bootstrap 3 navbar-toggle function.
Upon viewing this image, you can see that there is a line break using my background color.
https://i.sstatic.net/qgVAm.jpg
I have tried several options such as;
.navbar-default .navbar-toggle {
background-color: #000;
}
and a few other suggestions from the vast world wide web.. but none seem to be effective.
any advice would be appreciated.
thanks in advance.
edit 1 code;
<header class="clearfix">
<div class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>
</button>
<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="#">BollinBuild</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="about.php">ABOUT</a></li>
<li><a href="services.php">SERVICES</a></li>
<li><a href="testimonals.php">TESTIMONALS</a></li>
<li><a href="gallery.php">GALLERY</a></li>
<li><a href="contact.php">CONTACT</a></li>
<li><a href="admin.php">ADMIN</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</header>
css
#container {
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
}
.navbar {
margin-bottom: 0;
background: #000;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.navbar-brand {
position: relative;
padding: 21px 25px 21px 25px;
margin: 0!important;
transition: all 0.3s ease-in-out;
color: #1c1c1c;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav {
margin-right: 0px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
margin-left: 5px;
}
.navbar-default .navbar-nav > li > a {
color: #04fa00;
display: block;
font-size: 14px;
font-weight: 200;
padding: 20px;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li > a {
border-bottom: 3px solid #000;
}
.navbar-default .navbar-nav > li > a.active, .navbar-default .navbar-nav > li:hover > a {
border-bottom: 3px solid #04fa00;
color: #04fa00;
}
.navbar-default .navbar-toggle {
border-color: #000;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000;
}