How to make twitter-bootstrap navbar have no color

Question

I'm trying to reproduce a effect like basecamp navbar in my app.

The deal is that the navbar would have the same color as body background color, and no borders or anything, wich made the feel that 'is all the same thing'....

Anybody know a good way of doing this? PS: I'm using the .less files, so, I can easily edit the variables.

Thanks in advance

---

EDIT: I forget to said, but I want the fixed-top and responsiveness behaviors of bootstrap too.. I also already using tw bootstrap in my app, so, I'll really want to use it.

Answer 1

Ahem, this is easily done with pure CSS, you don't even need Bootstrap for this, neither 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 text-decoration 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've just made some simple "reset" lines with CSS to remove every color, borders and shadows (at least for Webkit browsers). Maybe you have to modify it a bit more. ​

Answer 2

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

Answer 3

Maybe I'm not understanding something but having just dealt with this, it seems like the easiest thing to do is override the default navbar color with a completely transparent color in the alpha channel...

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

If using rgba, the first three numbers represent red, green, blue, on a scale of 0-255, and the last is the alpha channel, 0 being completely transparent and 1 being completely opaque.

Setting it to white would work, too, if your background happened to be white, but this way it doesn't matter what your background is.