In my Bootstrap/Rails app, Which file do I add my Custom navbar CSS to?

Question

I have got some Bootstrap functionality up and running on my app. So far so good. I know that the 2 defaults colors for the navbar are black and white,using navbar-default and navbar-inverse. I am trying to add the navbar color change CSS to the assets/stlyesheets/application.css file, but not having any luck. the color im changing it to is green. ( an irrigation system website. Green for grass, yay)

this is what my application.css file currently looks like.

 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the 
 files listed below
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets 
 /stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

 .navbar-default {
     background-color: #33FF33;
     border-color: #E7E7E7;
 }

You can try use `!important` .. `.navbar-default { background-color: #33FF33 !important; border-color: #e7e7e7 !important; }` — rails_id, Sep 17 '14 at 03:38

score 0 · Answer 1 · answered Sep 17 '14 at 03:31

0

Create a new file under app/assets/stylesheets, add your custom styles to the file, then include it in application.css.scss.

@import custom_navbar.css.scss;

You will want to change application.css to application.css.scss and remove the comments entirely. You will then import the files you want using the @import directive.

Note that this somewhat breaks away from convention, but it might work for your purposes. You can read more about structuring SASS projects on the SASS blog.

answered Sep 17 '14 at 03:31

Mohamad

34,731
32
140
219

by new file, do you mean .css or .css.scss ? Using my custom style i used, how should this file look ? – ElMerroPero Sep 17 '14 at 22:26
It depends. `.css` or `.scss` will work. `.scss` is the SASS preprocessor. It lets you use variables and functions to compile your CSS. If you want to use SCSS, follow the instructions in my answer. The file will look exactly the same. Just make sure you import it after you import bootstrap, otherwise Bootstrap will overwrite it. – Mohamad Sep 18 '14 at 12:40

score 0 · Answer 2 · answered Sep 17 '14 at 06:23

If you are using the bootstrap-sass gem (you should), the right way to do this, is to set the bootstrap variables, in your application.css.scss, before including bootstrap:

$navbar-default-bg: #33FF33;
$navbar-default-border: #E7E7E7;

@import "bootstrap";

In my Bootstrap/Rails app, Which file do I add my Custom navbar CSS to?

2 Answers2