Change twitter bootstrap 3.0 navbar class background color in less

Question

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: enter image description here

2.in html:

<div class="navbar navbar-default">

in variable.less:

@navbar-default-bg: blue;

in custom.css:

.navbar{background: blue}

Output: enter image description here

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!

possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) — Bass Jobsen, Sep 19 '13 at 18:17
Thanks Bass Jobsen.Before I post this question I already see the post. it missing navbar class in the less file. you can try on your end, you might have better understand my question. — Henry, Sep 19 '13 at 18:18
Please see "in html" carefully. and before you think it is a duplicate question,try it on your end first please. — Henry, Sep 19 '13 at 18:26

score 3 · Answer 1 · answered Oct 31 '13 at 12:17

3

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.

answered Oct 31 '13 at 12:17

cyberbobcat

1,169
1
18
34

Bass Jobsen · Answer 2 · 2013-09-20T09:10:27.563

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:

enter image description here

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;

ok, if you say the .navbar does not set a background color. Could you try in html:
and just change the @navbar-default-bg:blue see what happened? — Henry, Sep 19 '13 at 20:16
yes i have done that, with the result shown in my answer. .navbar sets only: `.navbar { border-radius: 4px 4px 4px 4px; } .navbar { border: 1px solid transparent; margin-bottom: 20px; min-height: 50px; position: relative; z-index: 1000; }` and defines a `clearfix` — Bass Jobsen, Sep 19 '13 at 20:55
I've tried your answer, but the result is not the same. it returns only top and bottom margin colour changed to blue. — Henry, Sep 20 '13 at 02:39
@Henry i don't know what happens in your case. To be sure i download the latest version. I set `@navbar-default-bg: blue;` (in variables.less) and rebuild the css (Bootstrap). The result will be the same as shown in my answer and not like yours. I add the css for navbar-default after setting `@navbar-default-bg: blue;` to my answer. — Bass Jobsen, Sep 20 '13 at 09:06

Change twitter bootstrap 3.0 navbar class background color in less

2 Answers2

Linked