How to override the Bootstrap navbar-default-bg variable?

[DanielKehoe]

You can see a list of Bootstrap variables. For example, it shows @navbar-inverse-bg as a LESS variable.

The rails-bootstrap example app has a navigation partial that uses the navbar-inverse class from Bootstrap. The default background color is black. You can override the default:

// framework_and_overrides.css.scss
$navbar-inverse-bg: gray;
// import the CSS framework
@import "bootstrap";

I expected to be able to remove the navbar-inverse class from the navigation partial, and have a navbar like this:

<%# navigation styled for Bootstrap 3.0 %>
<nav class="navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to 'Home', root_path, class: 'navbar-brand' %>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <%= render 'layouts/navigation_links' %>
      </ul>
    </div>
  </div>
</nav>

and then override the $navbar-default-bg variable like this:

// framework_and_overrides.css.scss
$navbar-default-bg: gray;
// import the CSS framework
@import "bootstrap";

but it didn't work.

The issue was originally reported here:
RailsApps/rails-composer#146

[errakeshpd]

hi ,the above code will not resolve , see the execution cycle. in the bootstrap file files rendering in this manner such us" get variable > and *apply in navbar *" this realy happen when started to execute the bootstrap file . its present inside of the bootstrap , look the sequential flow of importing . ,the variable are getting from bootstrap/variables and setting up the vavbar color in bootstrap/navbar , this applying the color in navbar with the variable navbar-default-bg .
what actualy programmers are doing is trying to setup the variable value after setting up the color in navbar.

look into the code below if you want to change the color you have to do the following.

inside bootstrap file

// Core variables and mixins
@import "bootstrap/variables";
// Components
@import "bootstrap/navs";
$navbar-default-bg:red; // variable initializing
@import "bootstrap/navbar";

add variable before this navbar line / here the initialization is doing"

this will work fine , analyze the execution cycle.

but i am suggesting use the other class for applying the bg-color instead of over riding. DanielKehoe nicely explained above ..

[errakeshpd]

http://stackoverflow.com/a/23883060/2906559