Transparent Navbar

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

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 the index.html page which CSS file place in bootstrap/css/bootstrap.min.css and also you need to copy navbar code from bootstrap.com OR you can also copy from here which are below

<!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>

<!-- Collect the nav links, forms, and other content for toggling -->
<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>
after copy navbar code and paste 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 the costom.css CSS file and add some code for background image the code is below.

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

COMMENTS

BLOGGER: 8
Loading...
Name

bootstrap,1,CSS,6,Example,3,HTML,6,login,1,mysql,3,PHP,5,
ltr
item
webtipstricks: Transparent Navbar
Transparent Navbar
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
https://2.bp.blogspot.com/-57P_cWJnKTg/WEOT91jaGlI/AAAAAAAAA78/Xqn3YwAMIS80y90L2H5sV5PzWpdP-flLQCLcB/s640/navbar.png
https://2.bp.blogspot.com/-57P_cWJnKTg/WEOT91jaGlI/AAAAAAAAA78/Xqn3YwAMIS80y90L2H5sV5PzWpdP-flLQCLcB/s72-c/navbar.png
webtipstricks
http://www.webtipstricks.com/2016/12/transparent-navbar.html
http://www.webtipstricks.com/
http://www.webtipstricks.com/
http://www.webtipstricks.com/2016/12/transparent-navbar.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy