Bootstrap 3 Nav-Bar Change Color Cause Showing a White Border or White Line

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

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.

Bootstrap Navbar has strange hairline border

.navbar-default has a box-shadow, which is what you can see:

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);

Override it in your own CSS to get rid of that line:

-webkit-box-shadow: none;
box-shadow: none;

Here's a Codepen.

Change navbar color in Twitter Bootstrap

tl;dr - TWBSColor - Generate your own Bootstrap navbar

Version notes:

  • Online tool: Bootstrap 3.3.2+ / 4.0.0+
  • This answer: Bootstrap 3.0.x
  • For Bootstrap 5.x, please check documentation

Available navbars

You've got two basic navbars:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Default color usage

Here are the main colors and their usage:

  • #F8F8F8: navbar background
  • #E7E7E7: navbar border
  • #777: default color
  • #333: hover color (#5E5E5E for .nav-brand)
  • #555: active color
  • #D5D5D5: active background

Default style

If you want to put some custom style, here's the CSS you need to change:

/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.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: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}

Custom colored navbar examples

Here are four examples of a custom colored navbar:

Sample Image

And the SCSS code:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}

And finally, a little gift

I've just made a script which will allow you to generate your theme:
TWBSColor - Generate your own Bootstrap navbar

[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.

[Update]: From now, you can use Less as the default language provided by TWBSColor

[Update]: TWBSColor now supports drop down menus colorization

[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)

White line underneath my transparent nav bar Bootstrap

Add border: 1px solid transparent; to your navbar rule.

You also have an extra a tag (<a href="#" class="navbar-brand">).

Working Example (with added mobile toggle fucntion).

html,body {  background: darkblue;}/*THE ABOVE BACKGROUND RULE IS FOR DEMO ONLY*/
.navbar.navbar-default { background: none; border: 1px solid transparent;}.navbar.navbar-default .nav > li > a { color: white;}.navbar.navbar-default .navbar-brand { padding: 0px;}.navbar.navbar-default .navbar-brand img { height: 100%; padding: 15px; width: auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-default navbar-fixed-top">  <div class="container">
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 href="#" class="navbar-brand"> <img id="brand-image" alt="Website Logo" src="https://s0.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/logo.svg" /> </a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-left"> <li><a href="index.html"> Home </a> </li> <li><a href="#"> Discover </a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"> Login </a> </li> <li><a href="#"> Sign up </a> </li> </ul> </div> </div>
</nav><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Transparent color of Bootstrap-3 Navbar

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

.navbar li { color: #000 }

http://bootply.com/106969

Bootstrap - Why is my navbar background color being overwritten even when I specify it?

change this:

<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">

to:

<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">

The container-fluid class is the one you want

Change bootstrap navbar background color and font color

I have successfully styled my Bootstrap navbar using the following CSS. Also you didn't define any font in your CSS so that's why the font isn't changing. The site for which this CSS is used can be found here.

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}

.navbar-default {
background-color: #0f006f;
border-color: #030033;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}

.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}

.navbar-default .navbar-nav > li > a {
color: white; /*Change active text color here*/
}

Change the color of bootstrap icon bar in navbar

I checked your code structure and the reason why your css code is not working because the .navbar-toggle class was removed from button code as below:

<button class=" navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

So add class navbar-toggle in here as the bootstrap css is written on the basis of this class.

<button class=" navbar-toggle navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

Also check the example I have tried using your html code:

.navbar .navbar-toggler .icon-bar {
background: black !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggle navbar-toggler navbar-toggler-right" type="button" style="border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon icon-bar" ></span>
</button>
<a class="navbar-brand" href="#">SWAPNIL SARAF</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">INSPIRATIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>


Related Topics



Leave a reply



Submit