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:
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
Best Practices - Only Download CSS You Need, or Use a Minification Process
Bootstrap 4 CSS Causing Chrome's Print "Layout" to Disappear
How to Set Responsive Image's Max Width (Bootstrap 4)
Internet Explorer Creates Horizontal Scrollbar for Vertical Scrollbar's Width
Angular Mat-Select Text Color Doesn't Change
What Browsers Support CSS #Parent > .Direct-Child Notation? (No Jquery)
CSS Attr() Concatenation with Url Path
How to Center a CSS Drop Down Menu
Declaring Same CSS Class Multiple Time
How to Use a Background Image on the Stroke of an Svg Element
Is the Hash Necessary in Svg Font-Face Declarations
Change Only One of Multiple Backgrounds on Hover
How to Center One Image Over Another
Make Hexagon Shape with Border, Rounded Corners and Transparent Background
Make Flex Items Stretch Full Height and Vertically Center Their Content
Javafx CSS Button with Image - How to Define the Size of the Image