HTML:

```
    <nav class="navbar navbar-default navbar-fixed-top navbar-transparent">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

```

Custom CSS (other than the base bootstrap CSS):

```css
.navbar-transparent {
    background:transparent;
    background-image: none;
    border-color: transparent;
}

```

I looked at other posts on Stack Overflow and here and there on Google, but I can't seem to find a way to make the navbar fully transparent.

So far it looks like this and surely there must be an easier way to set the navbar transparent than to have to edit for all the classes and sub classes and elements within those classes manually?

![](https://i.stack.imgur.com/Fn3YF.png)