Bootstrap 3 Nav-bar change color cause showing a white border or white line
Solution 1
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.
Solution 2
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
Related videos on Youtube
Snippet
Updated on May 26, 2022Comments
-
Snippet almost 2 years
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
on the bootstrap-theme.css i have added and editted some codes
Code added and editted on bootstrap theme
.navbar { /* background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3B5998), to(#f8f8f8)); background-image: -webkit-linear-gradient(top, #3B5998, 0%, #f8f8f8, 100%); background-image: -moz-linear-gradient(top, #3B5998 0%, #f8f8f8 100%); background-image: linear-gradient(to bottom, #3B5998 0%, #f8f8f8 100%); background-repeat: repeat-x; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3B5998', endColorstr='#fff8f8f8', GradientType=0); -webkit-box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); border-radius: 4px; background-color:#3B5998; } .navbar .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #3B5998; color:#e7e7e7; } .navbar-brand, .navbar-nav > li > a { /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);*/ } .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus , .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; background-color: transparent; } .navbar-default .navbar-nav > .dropdown > a .caret{ border-top-color: #ffffff; border-bottom-color: #ffffff; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #3B5998; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #3B5998; border-bottom-color: #3B5998; }