Saturday, December 3, 2016

Transparent Navbar

Date - 8:02:00 PM

Navbar is the most important thing in any website because users can find out your website material's easily from the navigation bar, using navigation bar links. In this article, I will show you how to create transparent navbar using the bootstrap technique. why use bootstrap? because bootstrap is a quick tool to create an awesome website in less time. Now I show you what type of transparent navigation bar we will create in this article.

transparent navbar

this type of transparent navigation bar we will create how to create this navbar, 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 index.html page which CSS file place in bootstrap/css/bootstrap.min.css and also you need to copy navbar code form bootstrap.com OR you can also copy form here which are below.





 
 Navigation Bar
 
 


 
  
   
   
    
    Title
   
 
   
   
    
     
     Link
    
    
     
      
         
     
     
     
    
    
     Link
     
      Dropdown 
      
       Action
       Another action
       Something else here
       Separated link

after copy navbar code and pasted in your file now we need to create another custom CSS file where we modify bootstrap navbar. add a custom class in the <nav> tag which name is change-nav like this <nav class="navbar navbar-default change-nav> and we will only modify the change-nav class in costom.css CSS file and add some code for background image the code is below.

body{
 background-image: url(background.jpg);
 background-size: cover;
}
.change-nav{
 background-color: rgba(0,0,0,0.5);
 border:0px;
 border-radius: 0px;
 box-shadow: 0 3px 3px -2px rgba(0,0,0,0.5);
}
.change-nav ul li a{
 color:white!important;
}