"Glass Effect In Navbar With Toggle"
Bootstrap 4.1.1 Snippet by neerajposwal

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glass Effect Navbar</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> </head> <style> .navbar{background-color:gray;border:none;width:100%;} i{color:black;font-weight:bold;font-size:25px;} .tog{position:absolute; top:0px; left:0px; width:50%; height:625px; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); border-radius:0px 0px 1000px 0px; } .tog2{position:absolute; top:0px; right:0px; width:50%; height:625px; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); border-radius:0px 0px 0px 1000px; } #sidebtn{ position:absolute; top:0px; right:0%; } .list{position:absolute; top:25%; left:25%; list-style-type: none; } .list>li>a{ font-size:25px; color:black; font-family: 'Syncopate', sans-serif; font-weight:bold; } #list2>li>a{ color:black; font-family: 'Syncopate', sans-serif; font-weight:bold; font-variant:small-caps; font-size:15px; letter-spacing:10px; } #list2>li>a:hover{ color:blue; } #list2{ margin-left:%; display:inline; } .bottomtxt{ position:absolute; bottom:0%; left:0px; } .bottomtxt>h1{ font-size:60px; font-weight:bold; color:black; font-family: 'Syncopate', sans-serif; text-align:center; } body{background-color:gray;width:100%;height:100vh;} </style> <body style=""> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand showcase" href="#"><i class="fa fa-bars" aria-hidden="true"></i></a> </div> <ul class="nav navbar-nav" id="list2"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <div class="header-end"> <a class="navbar-brand showcase1" style="float:right;" href="#"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a> </div> </div> </nav> <div class="tog"> <a class="navbar-brand showcase" id="sidebtn" href="#"> <i style="color:black;" class="fa fa-times" aria-hidden="true"></i> </a> <!--Kabir--> <ul class="list"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li><a href="#about">New Work</a></li> <li><a href="#about">Loction</a></li> </ul> </div> <div class="tog2"> <a class="navbar-brand showcase1" href="#"><i style="color:black;" class="fa fa-times" aria-hidden="true"></i></a> <ul class="list"> <li><a href="#home">Home1</a></li> <li><a href="#news">News1</a></li> <li><a href="#contact">Contact1</a></li> <li><a href="#about">About1</a></li> <li><a href="#about">New Work1</a></li> <li><a href="#about">Loction1</a></li> </ul> </div> <script> $(document).ready(function(){ $(".tog").hide(); $(".showcase").click(function(){ $(".tog").toggle('slow'); }); }); </script> <script> $(document).ready(function(){ $(".tog2").hide(); $(".showcase1").click(function(){ $(".tog2").toggle('slow'); }); }); </script> <div class="col-lg-12 bottomtxt"> <h1>Glass Effect In Navbar With Toggle</h1> </div> </body> </html>

Related: See More

Get Shit Done Kit
Hover Effect Style
Sonar Wave Effect in Circle With CSS
Different types of hover and transition effect.

Questions / Comments:

Hello

Please Review This Snippet

Thank you

kabir16 () - 4 years ago - Reply 0

Hello

Please Review This Snippet

Thankyou

kabir16 () - 4 years ago - Reply 0

Hello

Please Review This Snippet

Thankyou

kabir16 () - 4 years ago - Reply 0

Hello

Please Review This Snippet

Thankyou

kabir16 () - 4 years ago - Reply 0