"Untitled"
Bootstrap 4.1.1 Snippet by Rajatsethi

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 charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/media.css"> <title>toggle-menu</title> </head> <body> <header> <div class="navber"> <div class="main-logo"> <a href="#">Site Logo</a> </div> <div class="menu-link"> <input type="checkbox" id="toggle-btn"> <label for="toggle-btn" class="hamburger"> <span class="spinner top-spinner"></span> <span class="spinner mid-spinner"></span> <span class="spinner bottom-spinner"></span> </label> <ul class="main-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </header> </body> </html>
html{ scroll-behavior: smooth; } *{ margin: 0; padding: 0; box-sizing: border-box; } body{ margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } ul, li, a, p{ margin:0; padding: 0; text-decoration: none; } header { background: #00a8ff; padding: 20px 40px; } .navber { display: flex; align-items: center; justify-content: space-between; } ul.main-menu { list-style: none; display: inline-flex; align-items: center; } ul.main-menu li { padding: 0 10px; } ul.main-menu li a { color: #fff; } .main-logo a { font-size: 20px; font-weight: bold; color: #fff; } span.spinner.mid-spinner { margin-top: 4px; margin-bottom: 4px; } .spinner { display: block; width: 25px; background: #fff; height: 3px; transition: all ease-in-out 0.3s; cursor: pointer; } label.hamburger { width: 25px; display: none; cursor: pointer; } input#toggle-btn { display: none; } @media (max-width: 767px){ ul.main-menu { display: block; position: fixed; background: #00a8ff; width: 300px; right: 0; top: 64px; height: 100%; transition: all ease-in-out 0.3s; transform: translateX(300px); /* transition: transform 300ms ease-in-out; */ } #toggle-btn:checked ~ ul.main-menu { transform: translateX(0); } #toggle-btn:checked ~ .hamburger .mid-spinner{ display: none; } #toggle-btn:checked ~ .hamburger .top-spinner { transform: rotate(-135deg); transition: all ease-in-out 0.3s; } #toggle-btn:checked ~ .hamburger .bottom-spinner { transform: rotate(135deg); margin-top: -3px; transition: all ease-in-out 0.3s; } label.hamburger { width: 25px; display: block; cursor: pointer; } ul.main-menu li { padding: 20px; } }

Related: See More

Vue Material Kit

Questions / Comments: