CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
yerassyl
yerassyl

Reputation: 3048

How to customize Bootstrap in rails 4

I am using Bootstrap with my rails app. Here is my application.scss

 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";
@import "colors";
@import "custom";

so after importing bootstrap i import custom.scss Here i have strange behaviour. In custom.scss i have:

@import "colors";

.navbar-default {
  background: $primary-color;
  a {
    color: $white;
  }
}

So my navbar-default background color is overwritten to my primary-color, but link color is still default. Inspecting in browser i see that my custom style for link is crossed and default is used. Very strange.

Upvotes: 1

Views: 1216

Answers (1)

Turnip
Turnip

Reputation: 36652

The selector used by Bootstrap is this .navbar-default .navbar-nav>li>a which is more specific than your selector (.navbar-default a) and so it will always take precedent.

Try this...

.navbar-default {
  background: $primary-color;

  .navbar-nav {
    >li {
       >a {
          color: $white;
       }
    }
  }
}

DEMO

Upvotes: 1

Related Questions