"Full Screen Navigation"
Bootstrap 4.1.1 Snippet by hasanrafi69

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 name="viewport" content="width=device-width, initial-scale=1"> <title>Full Screen Menu</title> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col"> <div> <span style="font-size:30px;cursor:pointer" onclick="setTimeout('openNav()', 1000)">☰</span> <h2 class="logo"><a href="#">Website Name</a></h2> </div> <nav id="myNav" class="main-menu"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#" class="logo">Website Name</a> <menu class="menu-item"> <ul> <li><a href="#">About</a></li> <li><a href="#">services</a></li> <li><a href="#">Client</a></li> <li><a href="#">Contact</a></li> </ul> </menu> </nav> </div> </div> </div> </body> </html>
body,a { font-family: 'Helvetica', sans-serif; text-decoration:none; } .logo{ text-align:center; margin-top:-1.3em; } .main-menu .logo{ text-align:center; position:absolute; color:#fff; } .main-menu { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: black; overflow-x: hidden; transition: 0.5s; } .menu-item { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .main-menu li a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s; text-transform:uppercase; } .main-menu li a:hover, .overlay li a:focus { color: #f1f1f1; } .main-menu .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; text-decoration:none; } @media screen and (max-height: 450px) { .main-menu li a {font-size: 20px} .main-menu .closebtn { font-size: 40px; top: 15px; right: 35px; } }
function openNav() { document.getElementById("myNav").style.width = "100%"; document.getElementById("myNav").style.transition = "1s"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; document.getElementById("myNav").style.transition = "1s"; }

Related: See More

Vue Material Kit
Cool Navigation Bar
Bootstrap4 navigation border animation
arrow key navigation thumbnail gallery modal view

Questions / Comments: