Bootstrap 3 Nav-bar change color cause showing a white border or white line

Question

Base on this fiddle. how do i remove the white line.. I tried to change the color of the nav-bar but there is a white line when its on mobile

Answer 1

Nice found the issue

.navbar-collapse{
border-top:0px !important;
 box-shadow:none;
}

after animation it adds a border top

wait ill give a fiddle

fiddle

Answer 2

You need to fix top border of .navbar-collapse (it's Bootstrap's #e6e6e6 border color you see):

.navbar-default div.navbar-collapse
{
    border-top:none;
    box-shadow:none;
}

After disabling it with border-top:none you will still notice a slightly dim line which is because there is a box-shadow rule, you need to override it too with box-shadow:none.

Live fiddle: http://jsfiddle.net/keaukraine/ZfYNG/

In this fiddle you will find 2 ways of fixing top border - by setting its color to #3b5998 and completely disabling it.