8

Howto change the styles of navbars in Twitter's Bootstrap 3 using Less or css? Using different styles as provide by the navbar-default and navbar-inverse classes.

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • 1
    what have you tried so far? are you asking a question? and why are you giving answers to your own questions ? i think Stack helps people to solve problems not to make them visit your own website or for Pub – Gildas.Tambo Sep 22 '13 at 13:31
  • 1
    @kougiland, see: http://meta.stackexchange.com/questions/17845/etiquette-for-answering-your-own-question – Bass Jobsen Sep 22 '13 at 14:00
  • 3
    I can't help but think this looks like a pointwhoring exercise. It's fine to answer your own question, but this question is far from constructive, and duplicates Bootstrap documentation – Bojangles Sep 22 '13 at 14:27
  • @Bojangles Bootstrap's docs don't tell you how to style a navbar, see: http://getbootstrap.com/components/#navbar. Docs handle the structure of the navbar only. – Bass Jobsen Sep 22 '13 at 14:54

1 Answers1

10

Just like buttons and panel a navbar will have two classes (see: https://github.com/twbs/bootstrap/issues/10332). The first class (.navbar) will set the structure. The second class will set the styling. By default there will be two classes for styling: .navbar-default and .navbar-inverse. To change the style of your navbar you have to change the styles of these styling classes. The best way to do this is using Less and recompile Bootstrap.

Using Less

The variables for .navbar-default and .navbar-inverse are set in variables.less and used by navbar.less. To define a custom navbar style you could modify the variable for .navbar-default or .navbar-inverse and reuse this classes. If you don't want to change the original code. Create an customnavbar.less file (don't forget ti import this in bootstrap.less) and copy the .navbar-default part from navbar.less to this file. Rename and set the variables. B.e. see here: Change twitter bootstrap 3.0 navbar class background color in less to set the background to blue.

Using CSS

Define your css just like .navbar-default. To change the style. B.e. for <nav class"navbar navbar-custom"> and set background to blue;

.navbar-custom { background-color: #0000FF;}

For more styles and easy styling see: http://twitterbootstrap3navbars.w3masters.nl/

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224