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.

Answer 4

Bootstrap (v5 beta, but will also apply to some previous versions) will mark certain styling classes with an !important tag. This will override standard specificity rules when applying css. If you navigate to your page in Chrome and use the dev-tools to highlight the element you want to change you can see what styles are being applied. In the case of the navbar , Bootstrap defines the default background color using a class of .bg-light . In dev-tools you can see that .bg-light styling is as follows:

.bg-light {
    background-color: #f8f9fa!important;
}

In order to override the !important tag at the end of that property, you need to include a !important tag of your own to your local css file. Do not make this change to the existing class of .bg-light as it could break other Bootstrap elements in your code. Instead, the way I handle this, is to assign an id to that element in my HTML and then set a custom css property to override it using and !important tag. Ex:
HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">

CSS

#navbar {
    background-color: transparent!important;
}