HermannKK
6/30/2019 - 1:54 PM

Responsive Transparent Navigation Bar

Responsive Transparent Navigation Bar

index.html
content_copyfile_download
<!-- Responsive Transparent Nav Bar -->
<body class="bg">

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain" style="background:#dbdbdb">
        
  Menu <i class="fa fa-bars"></i>
    
  </button>
      <a href="#" style="color: #000000;text-decoration:none"> <h3> Hello World !</h3> </a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right">
                            <li><a class="navv home" href="#home">Home</a></li>
                            <li><a href="#about" class="navv about">About Us</a></li>
                            
        <li><a class="navv contact">Contact Us</a></li>
                        </ul>
    </div>
    
  </div>
</div>
</body>
responsive-transparent-navigation-bar.markdown
content_copyfile_download
  • Rendered
  • Source

Responsive Transparent Navigation Bar

A Pen by Hermann KAO on CodePen.

License.

style.css
content_copyfile_download
.navbar {
  background:transparent;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus{
   color:black !important;
}