Kyrre Kyrre - 4 months ago 57
HTML Question

Removing white line from bootstrap 3 navbar-inverse dropdown menu

I'm making a as clean as possible menu and have managed to rid it of some unwanted styling. One little white line remains however, and I'm demanding 0 or none for borders all over my CSS, trying to get it gone.

It can be seen in these images above the music icon and below the dropdown icon:
Check it
With inspection

It is only in "small screen mode" and with the dropdown active it shows up.

My messy, custom navbar CSS (I've tried quite a few different approaches):

.navbar {
background-color: transparent;
background: transparent;
border: 0;
}

.navbar li {
color: white;
font-size: 14px;
}

.collapse {
border: 0;
}

#myNavbar {
border: 0;
}

.navbar .dropdown-menu::after{
border:0;
}

.navbar-header .navbar-collapse {
border: 0;
}

.navbar.navbar-default {
padding: 10px 0;
background: rgba(0, 0, 0, .1);
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;
}


The menu markup:

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right pull-right">
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tasks"></span> Web</a></li>
</ul>
</div>
</div>
</nav>


And here is a fiddle (press the computer icon to run it in its own window):

http://www.bootply.com/1GvAs3lGZ6

How can I point at that little bastard to get him out of there? Thank you so much for any help or pointers!

Answer

Actually its a box-shadow just remove/overwrite it

.navbar-collapse#myNavbar {
    -webkit-box-shadow: none;
    box-shadow: none;
}
Comments