How to make twitter-bootstrap navbar have no color

css, less, twitter-bootstrap

Solution

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. ​

Problem

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.

Original source