"Mobile Responsive Navigation Bar"
Bootstrap 4.1.1 Snippet by vikramthedeveloper

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 ----------> <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="toggle"> <i class="fa fa-bars" id="resbtn" style="font-size:48px;color:white"></i> </div> <!--Navigation Start--> <nav > <ul id="toggleul"> <li class="active" id="home"><a href="#"><div>Home</div></a></li> <li id="about"><a href="#"><div>About</div></a></li> <li id="contact"><a href="#"><div>Contact</div></a></li> </ul> </nav> <!--Navigation End--> <h1>Responsive Navigation Bar Resize For Effect</h1> </body> </html>
*{margin:0;padding:0;font-family:Arial} nav{ width:100%; background:black; } .toggle{ width:100%; text-align:right; background:darkblue; padding:10px 20px; box-sizing:border-box; display:none; } ul{ width:80%; padding:0; text-align:center; margin:0 auto; } ul li{ display:inline-block; padding:10px 20px; list-style:none; } ul li a{ color:white; text-decoration:none; } .active{ background:red; } /*Responsive media*/ @media screen and (max-width:600px) { ul{ width:100%; display:none; } ul li { display:block; text-align:center; } .toggle{ display:block; } }
var home = document.getElementById('home'); var about = document.getElementById('about'); var contact = document.getElementById('contact'); var resbtn = document.getElementById('resbtn'); var toggleul = document.getElementById('toggleul'); home.addEventListener("click" , function(){ home.classList.add('active'); contact.classList.remove('active'); about.classList.remove('active'); //toggleul.style.display ="none"; }); about.addEventListener("click" , function(){ about.classList.add('active'); home.classList.remove('active'); contact.classList.remove('active'); //toggleul.style.display ="none"; }); contact.addEventListener("click" , function(){ contact.classList.add('active'); about.classList.remove('active'); home.classList.remove('active'); //toggleul.style.display ="none"; }); resbtn.addEventListener("click" , function(){ if(toggleul.style.display == "none") { toggleul.style.display ="block"; }else { toggleul.style.display ="none"; } });

Related: See More

Paper Dashboard 2
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments: