Geek Answers Handbook

How to hide the navigator when an overlay appears

Using code from W3schools 'Sidenav Overlay' I'm trying to create the same effect in Bootstrap. I have a .navbar-toggle floating to the left and the navigation button still shows when the overlay moves to the right. Not sure how to hide the navigation bar when an overlay appears. First post, thanks

CSS

.navbar { webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); background-color: white; padding: 5px; } .navbar-brand { position: absolute; width: 100%; left: 0; top: 5px; text-align: center; margin: auto; } .navbar-toggle { z-index:3; border: none; cursor: pointer; float: left; } .navbar-toggle a:hover { border: none; background-color: none; cursor: pointer; } /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }

HTML

 <header> <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle" onclick="openNav()"> <span class="sr-only" >Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Test Nav</a> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> </div> </div> </header>

Javascript

 /* Set the width of the side navigation to 250px */ function openNav() { document.getElementById("mySidenav").style.width = "250px"; } /* Set the width of the side navigation to 0 */ function closeNav() { document.getElementById("mySidenav").style.width = "0"; }
+6
source share
3 answers

Add z-index as 99 instead of 1 to .sidenav class

 .sidenav { background-color: #111; height: 100%; left: 0; overflow-x: hidden; padding-top: 60px; position: fixed; top: 0; transition: all 0.5s ease 0s; width: 0; z-index: 99; }
+2
source

This will help you. try it

 $(".navbar-toggle").click(function(e) { e.preventDefault(); $("#mySidenav").toggleClass("activeclass"); }); $(".closebtn").click(function(e) { e.preventDefault(); $("#mySidenav").removeClass("activeclass"); }); 
 .navbar { webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); moz-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.49); background-color: white; padding: 5px; } .sidenav.activeclass{width:250px;} .sidenav{width:0px;} .navbar-brand { position: absolute; width: 100%; left: 0; top: 5px; text-align: center; margin: auto; } .navbar-toggle { z-index:3; border: none; cursor: pointer; float: left; } .navbar-toggle a:hover { border: none; background-color: none; cursor: pointer; } /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; } /* On s maller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <header> <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="slide-nav"> <div class="container"> <div class="navbar-header"> <a class="navbar-toggle"> <span class="sr-only" >Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="navbar-brand" href="#">Test Nav</a> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> </div> </div> </header>
+1
source

Hope this helps you! Here is a working example

 /*! * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ /* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Simple Sidebar - Start Bootstrap Template</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- Custom CSS --> <link href="sidebar.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style media="screen"> /*body { padding-top: 70px; }*/ #connectLogo { height: 60px; padding: 15px 0 5px 0; } #logo { height: 60px; padding: 5px 0 5px 20px; } .share-link { line-height: 60px; padding: 0 1em; font-size: 2em; } </style> </head> <body> <nav class="navbar navbar-default NOnavbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed menu-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <span class="glyphicon glyphicon-share hidden-xs pull-right share-link" aria-hidden="true"></span> <!-- Collect the nav links, forms, and other content for toggling --> <img class="center-block" id="connectLogo" src="http://app.talkfusion.com/connect_r/images/title-videochat.svg" alt=""> <!-- <div id="btnShare" style="display: none;"><img src="share.svg" width="22" alt="share"></div> --> </div> <!-- <button type="button" class="share-link hidden-xs pull-right"> <span class="sr-only">Share link</span> <span class="glyphicon glyphicon-link"></span> </button> --> </div> </nav> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li> <li> <a href="#">Dashboard</a> </li> <li> <a href="#">Shortcuts</a> </li> <li> <a href="#">Overview</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h1>Simple Sidebar</h1> <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> <a href="#menu-toggle" class="btn btn-default menu-toggle">Toggle Menu</a> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- Menu Toggle Script --> <script> $(".menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); </script> </body> </html>
-one
source

More articles:


All Articles