Rails/Bootstrap: How do I change the black bar at the top?

Question

Chapter 5 of railstutorial.org (http://ruby.railstutorial.org/chapters/filling-in-the-layout#top) talks about how to create a basic layout for a web site. I use it as a resource for putting a Rails web site together.

I'm having difficulty customizing the navbar/header. While changing the font color of the "sample app" logo is straightforward enough (just change the RGB setting of the color parameter under #logo), how do I change parameters in the rest of the header? How do I change that black bar to be some other color, such as dark blue/green/red/purple/brown/etc.? How do I change the color of the menu links (Home/Help/Sign Up) from the default gray to yellow? Or orange? Or some other color?

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

.navbar {
    .navbar-inner {
        background-color: #2c2c2c;
        background-image: none;
    }
}

Source Change background color in navbar fixed menu bar Bootstrap

You can take a look at this too.

edited May 23 '17 at 12:29

Community

1
1

answered Jun 08 '13 at 15:32

Quazi Marufur Rahman

2,603
5
33
51

score 0 · Accepted Answer · answered Jun 08 '13 at 15:39

If you want to change color or customize style of twitter bootstrap (e.g header, link etc), you can use generator for twitter bootstrap..

Generator

Or if you don't know class/id potition of style, you can use inspect element on your browser and see element using class/id of style

Example

Header using blue color

.navbar-inner {
    min-height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #45aeea;
    background-image: -moz-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#54b4eb),to(#2fa4e7));
    background-image: -webkit-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: -o-linear-gradient(top,#54b4eb,#2fa4e7);
    background-image: linear-gradient(to bottom,#54b4eb,#2fa4e7);
    background-repeat: repeat-x;
    border: 1px solid #1990d5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff2fa4e7',GradientType=0);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
    box-shadow: 0 1px 4px rgba(0,0,0,0.065);
   }

Link header using white color

.navbar .nav>li>a {
   float: none;
   padding: 10px 15px 10px;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 1px 0 #ce4213;
}

Bootstrap themes

You can see some amazing bootstrap themes here

Thanks. This worked for me. Note to lurkers: When changing the background color from black to something else for the first time, choose a bright color. If the color you choose is too dark to be easily distinguishable from black, you'll think what you did isn't working. — jhsu802701, Jun 08 '13 at 16:03

Rails/Bootstrap: How do I change the black bar at the top?

2 Answers2

Generator

Example

Bootstrap themes