3

This is specific to Rails version 4.

I have a fie "custom.css.scss" and am using the bootstrap class' of "navbar navbar-fixed-top navbar-inverse" followed by a div of navbar-inner and div container.

No matter where I put the variables, either before the include @bootstrap or after, I cannot change the black color of the Bootstrap inverse navbar.

Here is the first bit of my "custom.css.scss" file where I just try and set the whole damn thing to purple: 

$navbar-inverse-color:                #9b59b6;
$navbar-inverse-bg:                   #9b59b6;
$navbar-inverse-border:               #9b59b6;
$navbar-inverse-link-color:           #9b59b6;
$navbar-inverse-link-hover-color:     #9b59b6;
$navbar-inverse-link-hover-bg:        #9b59b6;
$navbar-inverse-link-active-color:    #9b59b6;
$navbar-inverse-link-active-bg:       #9b59b6;
$navbar-inverse-link-disabled-color:  #9b59b6;
$navbar-inverse-link-disabled-bg:     #9b59b6;
$navbar-inverse-brand-color:          #9b59b6;
$navbar-inverse-brand-hover-color:    #9b59b6;
$navbar-inverse-brand-hover-bg:       #9b59b6;
$navbar-inverse-toggle-hover-bg:      #9b59b6;
$navbar-inverse-toggle-icon-bar-bg:   #9b59b6;
$navbar-inverse-toggle-border-color:  #9b59b6;


@import "bootstrap";

/* mixins, variables, etc. */

But, it stays exactly the same black (inverse) navbar. The other aspects of the styling (below where it comments for mixins, variables, etc) all work fine and I can change element colour and styling no problem.

I am using bootstrap-sass and sass-rails latest versions with Rails 4.0.3. I have been at this all day long and can see no way to change the bootstrap variables and thus my colours.

Very frustrated and hope someone can help :)

EDIT: Sharing code that gives the navbar (header)

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class ="navbar-inner">
    <div class="container">
      <%= link_to 'Tracker', root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "Help",    help_path %></li>
          <li><%= link_to "About",   about_path %></li>
          <li><%= link_to "Sign in", "#" %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
Siguza
  • 21,155
  • 6
  • 52
  • 89
tentimes
  • 1,462
  • 1
  • 11
  • 16
  • Overriding the variable won't change navbar style you have to use it in your stylesheet. For eg: if you want to change the navbar background then you can do something like .navbar-inverse{background:$navbar-inverse-bg;} – Monideep Mar 19 '14 at 16:34
  • Your code looks alright. Variables should be set before `@import "bootstrap"`. Can you share the code where you are using the `navbar-inverse`? Also, is bootstrap loaded in the application correctly, do you see it applied on other elements? – Kirti Thorat Mar 19 '14 at 16:52
  • Deep: That made no difference, it's still exactly the same black inverse navbar I'm afraid :( – tentimes Mar 19 '14 at 17:32
  • Did you ever get a solution for this? I'm having the same experience. Thanks. – Richard_G Aug 10 '14 at 21:09
  • Funny, I copied your code, dropped it in, and it worked just fine... I have much the same environment. Thanks. – Richard_G Aug 10 '14 at 21:12
  • I gave up completely in the end, due to this and other problems getting bootstrap to do anything consistently - I switched to Foundation, which does what you expect it to in a logical manner. Bootstrap sucks and never works as intended as far as all my experience with it went. – tentimes Aug 11 '14 at 08:39

2 Answers2

1

The reason is that the variable context/scope is lost. You need to make sure you only import the underscored files directly, then your variables will be recognized.

non-underscored imported scss/sass files will begin their own variable context/scope, ignoring anything above it.

The latest bootstrap top-level file in the version I checked 3.3.1 is _bootstrap.scss. This is a recent change (old was bootstrap.scss) and I just had to update some project build files when upgrading from 3.1.1. In this case, you may just want to update your bootstrap-sass dependency and it might just start working for you!

kross
  • 3,627
  • 2
  • 32
  • 60
0

Assuming that you're referencing and have configured the Bootstrap gem ('bootstrap' or 'bootstrap-sass'), create a file in the app/assets/stylesheets folder with a name that will that will cause it to load before 'application.scss' (such as '_custom_variables.scss').

Inside this file, before anything else, import "bootstrap/variables", (as specified in the '_bootstrap.scss' file within the gem.) and then make your customizations. This is the 'one little detail' that isn't emphasized in the docs!

Note that these are only Bootstrap variable overrides, your 'regular' customizations will still be in 'custom.css.scss' after Bootstrap has loaded.

Next, reference your customization file in 'application.scss' before the @import "bootstrap" statement.

Example:

In your variable customization file, _custom_variables.scss:

// app/assets/stylesheets/_custom_variables.scss
@import "bootstrap/variables";
$body-bg:    $gray-dark;
$body-color: $gray-light;

In application.scss:

// app/assets/sytlesheets/application.scss   

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "custom_variables";
@import "bootstrap";
Karl
  • 33
  • 4