Transparent Navbar

0 Shakil Khan Saturday, December 3, 2016

Navbar is the most important thing in any website because user's can find out your website materials easily using navigation links. but in this article i will show you how to create transparent navbar very easily

Transparent CSS Navigation bar

Navbar is the key component of a website because users can find out your website material's easily from the navigation bar, using navigation bar links. today in this article i will create a transparent navigation bar using bootstrap framework why use bootstrap? because bootstrap is a quick tool to create an awesome website in less time.

first, go to get bootstrap and download bootstrap framework. Now we want to download HD quality image because for background we use the image. go on this link pixabay.com to download HD quality image.
after downloading bootstrap and image now we create HTML page which name is index.html and link your bootstrap CSS file in the index.html page which CSS file place in bootstrap/css/bootstrap.min.css and also you can copy the navigation bar code for the bootstrap official website bootstrap



<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Bootstrap Transparnent Navbar</title>

 <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

body{

 background: url("https://cdn.pixabay.com/photo/2017/08/23/08/33/cats-eyes-2671903_960_720.jpg");

 background-repeat: no-repeat;

 background-size: cover;

}

.custom-nav{

 border-radius: 0px;

 border:0px;

 background-color: rgba(0,0,0,0.5);

 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);

 box-shadow: 0 0 10px rgba(0,0,0,0.5);

} 

</style>

</head>

<body>

 <nav class="navbar navbar-default custom-nav" role="navigation">

  <div class="container-fluid">

   <!-- Brand and toggle get grouped for better mobile display -->

   <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">

     <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="#">Title</a>

   </div>


   <div class="collapse navbar-collapse navbar-ex1-collapse">

    <ul class="nav navbar-nav">

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

     <li><a href="#">Link</a></li>

    </ul>

    <form class="navbar-form navbar-left" role="search">

     <div class="form-group">

      <input type="text" class="form-control" placeholder="Search">

     </div>

     <button type="submit" class="btn btn-default">Submit</button>

    </form>

   

   </div><!-- /.navbar-collapse -->

  </div>

 </nav>

</body>

</html>

for complete details watch this video thank you and subscribe my youtube channel to get the latest updates in the email box