CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Joel Damien
Joel Damien

Reputation: 129

Transparent Fixed-top Navbar with Boostrap

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):

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

Upvotes: 1

Views: 5415

Answers (2)

Joel Damien
Joel Damien

Reputation: 129

I guess this works. If anyone has a better workaround, please answer.

@media screen and (min-width: 680px) {
.navbar-transparent {
    background: transparent;
    background-image: none;
    border-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background: transparent;
    background-image: none;
    border-color: transparent;
}}

Upvotes: 1

stylesenberg
stylesenberg

Reputation: 519

You have to overwrite the ".active" class in your css.

You are already using that (predefined bootstrap) css-class in your code:

< li class="active">< a href="#">Home< / a >< / li>

try:

#navbar ul li.active {
    background:transparent;
    background-image: none;
    border-color: transparent;
}

#navbar ul li:hover {        // to overwrite when you :hover the list items
    background:transparent;
    background-image: none;
    border-color: transparent;
}

Upvotes: 0

Related Questions