How to make twitter-bootstrap navbar without color

Question

I am trying to reproduce an effect similar to basecamp navbar in my application.

The deal is that the navbar will have the same color as the background color of the body, and no borders or anything else that creates the feeling that "everything is the same" ....

Does anyone know a good way to do this? PS: I use .less files, so I can easily edit variables.

Thank you in advance

---

EDIT: I forgot to say, but I also want the bootstrap behavior with a fixed top and responsiveness .. I also already used tw bootstrap in my application, so I really want to use it.

Answer 1

Ahem, this is easy to do with pure CSS, you don’t even need Bootstrap, nor its CSS classes

HTML:

  <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> 

CSS:

 ​.navigation li { display: inline; padding-left: 5px; padding-right: 5px; } 

Of course, you still have to style the links to remove the text, etc.

Edit:

 .navbar-inner { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .navbar-inverse .nav .active > a { background: 0 !important; color: #333 !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .navbar-inverse .nav > li > a { color: #333 !important; text-shadow: none !important; } .navbar-inverse .nav > li > a:hover { color: #333 !important; } 

Demo: http://codepen.io/anon/pen/vJsfz

I just made a few simple reset lines with CSS to remove every color, border, and shadow (at least for Webkit browsers). You may have to change it a bit.

Answer 2

 /* clear bootstrap header colors */ .navbar-default { background-color: white; border-color: white; } 

Answer 3

Maybe I don’t understand something, but having just figured it out, it seems that the easiest way is to override the default color of the navigator with a completely transparent color in the alpha channel ...

 .navbar-default { background: rgba(255, 255, 255, 0); } 

When using rgba, the first three numbers represent red, green, blue, on a scale from 0 to 255, and the last is the alpha channel, 0 is completely transparent, and 1 is completely opaque.

Setting white to work will also work if your background is white, but it doesn’t matter what your background is.