navbar color in Twitter Bootstrap

Question

How can I change the background color of the navbar of the Twitter Bootstrap 2 0 2  How can I change color of all the elements of the navbar to reflect the background color

User · Answer

If you are using the LESS or SASS Version of the Bootstrap. The most efficient way is to change the variable name, in the LESS or SASS file.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

This by far the most easiest and the most efficient way to change the Bootstraps Navbar. You need not write overrides, and the code remains clean.

User · Answer

I m using Bootstrap version 3 2 0 and it looks as though  navbar-inner doesn t exist any more   The solutions here which suggest overriding  navbar-inner didn t work for me - the colour remained the same   The colour only changed when I overrode  navbar as shown below    navbar       background-color   A4C8EC      background-image  none

User · Answer

You can overwrite the bootstrap colors  including the  navbar-inner class  by targetting it in your own stylesheet as opposed to modifying the bootstrap css stylesheet  like so    navbar-inner     background-color   2c2c2c     fallback color  place your own          Gradients for modern browsers  replace as you see fit      background-image  -moz-linear-gradient top   333333   222222     background-image  -ms-linear-gradient top   333333   222222     background-image  -webkit-gradient linear  0 0  0 100   from  333333   to  222222      background-image  -webkit-linear-gradient top   333333   222222     background-image  -o-linear-gradient top   333333   222222     background-image  linear-gradient top   333333   222222     background-repeat  repeat-x        IE8-9 gradient filter      filter  progid DXImageTransform Microsoft gradient startColorstr   333333   endColorstr   222222   GradientType 0       You just have to modify all of those styles with your own and they will get picked up  like something like this for example  where i eliminate all gradient effects and just set a solid black background-color    navbar-inner     background-color   000     background color will be black for all browsers      background-image  none    background-repeat  no-repeat    filter  none      You can take advantage of such tools as the Colorzilla Gradient Editor and create your own gradient colors for all browsers and replace the original colors with your own   And as i mentioned on the comments  i would not recommend you modifying the bootstrap css stylesheet directly as all of your changes will be lost once the stylesheet gets updated  current version is v2 0 2  so it is preferred that you include all of your changes inside your own stylesheet  in tandem with the bootstrap css stylesheet  But remember to overwrite all of the appropriate properties to have consistency across browsers

User · Answer

If you havent got time to learn  less  or do it properly  here s a dirty hack     Add this above where you render the bootstrap nav bar HTML - update the colours as required     lt style type  text css  gt       navbar-inner       background-color  red      background-image  linear-gradient to bottom  blue  green       background-repeat  repeat-x      border  1px solid yellow      border-radius  4px 4px 4px 4px      box-shadow  0 1px 4px rgba 0  0  0  0 067       min-height  40px      padding-left  20px      padding-right  20px      dropdown-menu       background-clip  padding-box      background-color  red      border  1px solid rgba 0  0  0  0 2       border-radius  6px 6px 6px 6px      box-shadow  0 5px 10px rgba 0  0  0  0 2       display  none      float  left      left  0      list-style  none outside none      margin  2px 0 0      min-width  160px      padding  5px 0      position  absolute      top  100       z-index  1000      btn-group open  btn dropdown-toggle     background-color  red      btn-group open  btn dropdown-toggle     background-color lime      navbar  nav li dropdown open  gt   dropdown-toggle   navbar  nav li dropdown active  gt   dropdown-toggle   navbar  nav li dropdown open active  gt   dropdown-toggle     color white    background-color Teal      navbar  nav  gt  li  gt  a       color  white      float  none      padding  10px 15px      text-decoration  none      text-shadow  0 0px 0  ffffff      navbar  brand     display  block    float  left    padding  10px 20px 10px    margin-left  -20px    font-size  20px    font-weight  200    color  white    text-shadow  0 0px 0  ffffff      navbar  nav  gt  li  gt  a focus   navbar  nav  gt  li  gt  a hover     color  white    text-decoration  none    background-color  transparent      navbar-text     margin-bottom  0    line-height  40px    color  white      dropdown-menu li  gt  a     display  block    padding  3px 20px    clear  both    font-weight  normal    line-height  20px    color  white    white-space  nowrap      navbar-link     color  white      navbar-link hover     color  white      lt  style gt

User · Answer

The best way currently to do the same would be to install LESS command line compiler using    npm install -g less jshint recess uglify-js   Once you have done this  then go to the less folder in the directory and then edit the file variables less and you can change a lot of variables according to what you need including the color of the navigation bar   navbarCollapseWidth              979px    navbarHeight                     40px   navbarBackgroundHighlight         ffffff   navbarBackground                 darken  navbarBackgroundHighlight  5     navbarBorder                     darken  navbarBackground  12      navbarText                        777   navbarLinkColor                   777   navbarLinkColorHover              grayDark   navbarLinkColorActive             gray   navbarLinkBackgroundHover        transparent   navbarLinkBackgroundActive       darken  navbarBackground  5      Once you have done this  go to your bootstrap directory and run the command make

User · Answer

You can download a custom version of bootstrap and set  navbarBackground to the color you want     http   twitter github com bootstrap customize html

User · Answer

If you are using LESS  you can use Mixins for less code  Here I will add a gradient  border  and border-radius    navbar-inner      gradient  gt   vertical  ffffff   ECECEC     border   E2E2E2     border-radius 6px        If you are using the rails gem  twitter-bootstrap-rails  I do this directly in the file bootstrap and overrides css less

User · Answer

I actually just overwrite anything I want to change in the site css  you should load the site css after bootstrap so it will overwrite the classes  What I have done now is just made my own classes with my own little bootstrap theme  Little things like this    navbar-nav li a      color   fff      font-size  15px      margin-top  9px     navbar-nav li a hover       background-color   18678E      height  61px      I also changed the likes of the validations errors the same way

User · Answer

You can customize your own version on the Bootstrap official website

User · Answer

In bootstrap css line 4784 we see    navbar-inverse  navbar-inner     background-color   FFFFFFF    background-image  -moz-linear-gradient top   222222   111111     background-image  -webkit-gradient linear  0 0  0 100   from  222222   to  111111      background-image  -webkit-linear-gradient top   222222   111111     background-image  -o-linear-gradient top   222222   111111     background-image  linear-gradient to bottom   222222   111111     background-repeat  repeat-x    border-color   252525    filter  progid DXImageTransform Microsoft gradient startColorstr   ff222222   endColorstr   ff111111   GradientType 0       You need to remove all the  background-image  property declarations to get the desired effect

User · Answer

An excellent resource to see how to theme bootstrap is  bootswatch com  It has nice examples and shows code as well  In short  they use lessc to recompile the bootstrap css to your new color-theme css  The nice thing of their approach is that is build on top of bootstrap  so when  bootstrap is updated  you just recompile   Links about using lessc and bootstrap     Using bootstrap with less Lessc org

User · Answer

that is what i do    navbar-inverse  navbar-inner     background-color   E27403     it s flat    background-image  none      navbar-inverse  navbar-inner     background-image  -ms-linear-gradient top   E27403   E49037     background-image  -webkit-linear-gradient top   E27403   E49037     background-image  linear-gradient to bottom   E27403   E49037       it works well for all navigator  you can see demo here http   caverne fr on the top

User · Answer

Wouldn t occam s razor say to just do this until you need something more complex   It s a bit of a hack  but may suit the needs of someone that wants a quick fix    navbar-default  container-fluid      background-color  62ADD7     Change the color     margin  -1px -1px 10px -1px     Get rid of the border

[colors] navbar color in Twitter Bootstrap

Examples related to colors

Examples related to twitter-bootstrap

Examples related to navbar