I am trying to create a navbar with a grid inside of it. I need to have the text appear on one line. As you can see from this screenshot, "Cryptocurrencies / Markets" and "Market Cap" and volume take up multiple lines. I want the text to only take up one line. See attached screenshot:
I've tried changing the col-sm-x classes but no luck. I can't get everything to line up on one line. Any suggestions? Thanks.
<html>
<head>
<title>#yield('meta_title') | #lang('constants.WEBSITE_NAME')</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style type="text/css">
/* navbar */
.navbar-default {
background-color: #337ab7;
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;
}
}
.navbar-top {
padding-left:150px;
font-size:10px;
}
</style>
</head>
<body>
<nav class="navbar mobile navbar-default visible-xs">
<div class="navbar-header navbar-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="color:#fff"><strong>Cryptocurrencies</strong> 1000 / Markets 1000</div>
<div class="col-sm-5" style="color:#fff">
<strong>Market Cap</strong>:$263,920,404,123 <strong>24h Vol</strong>:$15,360,994,812
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-info btn-sm">Submit ICO</button>
<button type="button" class="btn btn-info btn-sm">Login</button>
</div>
</div>
</div>
</div>
</nav>
</body>
<html>
You may also want to include a width and margin on that div...
.navbar-top {
padding-left: 150px;
font-size: 10px;
white-space: nowrap;
width: 92%;
margin: 0 auto;
}
And on your .row div add align-items-center
<div class="row align-items-center">
...
</div>
Related
How do I center both the brand and the navbar in bootstrap. Also how can I have the navbar stop around the brand and links, ie wraps around content and navbar and not stretch across the entire page. Please take a look at the css I just added
.navbar-default {
background-color: #395085;
border-color: #2a3858;
}
.navbar-default .navbar-brand {
color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-toggle {
border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dcdcdc;
}
.navbar-default .navbar-link {
color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-brand {
background-size: 1
^% auto;
background-repeat: no-repeat;
margin-right: 0px;
background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
margin-top: 5px;
}
#media (max-width:649px){
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-toggle {
color: #FFFFFF;
}
}
#mid_title {
font-size: 24px;
line-height: 24px;
font-weight: 400;
color: #fff;
margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */;
}
#middle_wrapper {
clear: both;
padding: 40px 15px 0;
overflow: hidden;
font-size: 14px;
color: #f4e9d9;
background: url(/images/templatemo_middle.jpg) center top;
}
.col_allw300 {
float: left;
}
.templatemo_text {
color: #08122a;
font-weight: normal;
text-decoration: none;
}
.lower_specs {
background-color: #BFC5CE;
}
.sb_news_box {
clear: both;
margin-bottom: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electro-Tech Inc</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/etp.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="about.html">Electrotech</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav justify-content-center">
<li>About Us</li>
<li>Industries</li>
<li>Products</li>
<li>News</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
You could set .navbar to have the CSS style text-align: center, then set .navbar-header and .navbar-collapse to display: inline-block. This way your elements are still block elements, but they flow like inline elements.
Here is a fiddle. Note the media query so you keep default Bootstrap responsive menu behavior.
My navbar has 4 links all floating to the right. I used .pull-right to make it work. On mobile, I would like every link to move to the left except for my active link. I want my active link to stay right on all devices.
I'm trying to find the most efficient way to do this. Are there any classes within Bootstrap that can help with this or do I need to create a custom class for pulling the 3 links left on mobile?
HTML
<!-- Fixed Navbar -->
<nav class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- end navbar-header -->
<div id="navbar" class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Summit</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Client Login</li>
</ul>
</div><!--/.nav-collapse -->
</div> <!-- end container -->
</nav> <!-- end navbar navbar-custom -->
CSS
/*======= navbar ========*/
.navbar {
opacity: 0.95;
-webkit-opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95); /* internet explorer */
}
#navbar > ul.nav a:hover {
color: #50b948; /*TD Green*/
}
.navbar-custom {
background-color: #f2f2f2;
font-family: 'Quicksand', sans-serif;
font-size: 1rem; /*14px*/
text-transform: uppercase;
font-weight: 700;
border: none;
}
.navbar-custom .navbar-brand {
color: #777;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-custom .navbar-text {
color: #777;
}
.navbar-custom .navbar-nav > li > a {
color: #777;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a {
background: #50b948;
color: #FAFAFA;
}
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
background: #FAFAFA;
-webkit-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
-moz-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
.navbar-custom .navbar-toggle {
border-color: #ccc; /*btn border-color*/
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #ddd; /*btn color on hover*/
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
border-color: #ccc; /*collapsed bottom border color*/
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
background-color: #e7e7e7;
color: #555;
}
#media (max-width: 767px) {
.navbar-custom .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
.navbar-custom .navbar-link {
color: #777;
}
.navbar-custom .navbar-link:hover {
color: #333;
}
.navbar-custom .btn-link {
color: #777;
}
.navbar-custom .btn-link:hover,
.navbar-custom .btn-link:focus {
color: #333;
}
.navbar-custom .btn-link[disabled]:hover,
fieldset[disabled] .navbar-custom .btn-link:hover,
.navbar-custom .btn-link[disabled]:focus,
fieldset[disabled] .navbar-custom .btn-link:focus {
color: #ccc;
}
The trick here will be to utilize the classes Bootstrap already adds for mobile and non-mobile.
Your div:
navbar-collapse collapse
Becomes:
navbar-collapse collapse in
When the slide down menu is opened on mobile. This means if your CSS applies to the class .navbar-collapse.in it will only apply to the open menu on mobile.
.navbar-collapse.in {
float: left !important;
}
Additionally, Bootstrap v4.0 (currently available but in alpha) contains the classes .pull-xs-left and .pull-sm-right, presumably for exactly this purpose.
Use '.navbar-right'. Specifically designed to move the nav to the right on desktop, but will move links back to the left when on mobile view.
I'm trying to remove the gap between the Navbar and the Carousel.
However I can't for the life of me work out which element is causing the gap and how to fix it.
/* CSS used here will be applied after bootstrap.css */
.navbar {
margin: 0; /*add this*/
padding: 0px;
}
.navbar-default {
background-color: #ffffff;
}
/* title */
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #808080;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #808080;
}
/* active link */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #ff0000;
}
/* 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;
}
}
.container {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Progression</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Physio</li>
<li>Massage</li>
<li>Beauty</li>
<li>First Aid</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container">
<div class="row">
<div class="col-sm-12>
<div id=" my-slider"="" data-ride="carousel">
<!-- indicators dot nav -->
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="Physio Massage Val d'Isere">
<div class="carousel-caption">
<h2>Massage</h2>
<h4>Relaxation to Deep Tissue</h4>
</div><!-- end carousel caption -->
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="Beauty Treatments Nails Facials & Waxing Val d'Isere">
<div class="carousel-caption">
<h2>Beauty</h2>
<h4>Nails - Facials - Waxing</h4>
</div>
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="Physiotherapy Assesment Treatment Rehab Val d'Isere">
<div class="carousel-caption">
<h2>Physiotherapy</h2>
<h4>Assesment Treatment Rehab</h4>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.bootply.com/jbTugk4aPV
Actually that's not a 1 pixel gap it a border in css names navbar.less line no. 15.
Here is your css
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Remember its your css file code not mile the border in it creating that gap you can override this by typing another css in your file.
.navbar{
border:none!important;
}
Or you can simply set the border-width to 0px in
.navbar-static-top {
z-index: 1000;
border-width: 0px;
}
to remove the 1px white navbar border.
I would like to implement the navigation bar style used by this open source software (http://demo.openrem.org/openrem/ct/) which uses django as a web framework. I have have grabbed the html and css from the source that I think I require. However my nav-bar does not display inline, has bullet points in the list (https://jsfiddle.net/1prLa21x/1/). I think I am missing some additional css style settings. Any pointers on how to get closer to the navbar displayed by the openrem page?
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/openrem/">nc_jobs</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Done</li>
<li>Not Done</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text navbar-right">
<span class="glyphicon glyphicon-user"></span>
Welcome test.user -
logout
</p>
</ul>
</div>
</div>
</div>
CSS
.navbar-default {
background-color: #7092be;
border-color: #145ebe;
}
.navbar-default .navbar-brand {
color: #e0eaf6;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #e0eaf6;
}
.navbar-default .navbar-nav > li > a {
color: #e0eaf6;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #145ebe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #145ebe;
}
.navbar-default .navbar-toggle {
border-color: #145ebe;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #145ebe;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #e0eaf6;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e0eaf6;
}
.navbar-default .navbar-link {
color: #e0eaf6;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #e0eaf6;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #145ebe;
}
}
That example is running off the bootstrap framework -
if you add https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css as an external resource to your fiddle it displays correctly.
You can download the whole source at getbootstrap.com
in html:
<div class="navbar navbar-default">
in variable.less file:
#navbar-default-bg: #f8f8f8;
After change this hex colour to other colour(ie. blue), you will notice that only bottom edge colour change to blue. because the class navbar has background too, it block the #navbar-default-bg colour.
Sample:
1.in html:
<div class="navbar navbar-default">
in variable.less:
#navbar-default-bg: blue;
Output:
2.in html:
<div class="navbar navbar-default">
in variable.less:
#navbar-default-bg: blue;
in custom.css:
.navbar{background: blue}
Output:
I know that if I make a custom css file and put .navbar{background: blue} it will change the navbar color to what I want.
But I prefer to edit less file. is there any way to do that?
Try on your end first before you think this is a duplicate question!
Try removing the default bootstrap-theme.css and bootstrap-theme.min.css files from your project as I think they over-ride some of the styles in the main bootstrap.css files.
I think your question is duplicate still. I think your conclusion above is not right.
When i set #navbar-default-bg: blue;(in variables.less) and rebuild the css (Bootstrap). <div class="navbar navbar-default"> will give me a blue navbar like:
The .navbar class don't set a background color neither it does influence the background color of your navbar-default class.
At the moment you will always have to add a second class to the .navbar (like navbar-default, navbar-inverse or navbar-custom) class for styling the navbar. See also: https://github.com/twbs/bootstrap/issues/10332
After setting #navbar-default-bg: blue; and recompile bootstrap the css for .navbar-default will look like:
.navbar-default {
background-color: #0000ff;
border-color: #0000de;
}
.navbar-default .navbar-brand {
color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777777;
}
.navbar-default .navbar-nav > li > a {
color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #0000de;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background-color: #0000de;
}
.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: #555555;
border-bottom-color: #555555;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777777;
}
.navbar-default .navbar-link:hover {
color: #333333;
}
Note blue will be set to #0000FF;