"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="stylesheet" type="text/css" href="css/style.css"> <title>navbar</title> </head> <body> <nav> <div class="logo">Brand</div> <input type="checkbox" id="click"> <label for="click" class="menu-btn"><i class="fa-solid fa-bars"></i> </label> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" ></script> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } nav{ height: 80px; background: #1b1b1b; display: flex; align-items: center; justify-content: space-between; padding: 0px 50px 0px 100px; } nav .logo{ font-size: 32px; color: #fff; font-weight: 600; } nav ul{ display: flex; list-style: none; } nav ul li{ margin: 0 5px; } nav ul li a{ color: #fff; padding: 5px 10px; border-radius: 5px; text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: 1px; transition: all ease-in-out 0.3s; } nav ul li a:hover, nav ul li a.active{ color: #000; background: #fff; padding: 5px 10px; } .menu-btn{ color: #fff; font-size: 22px; cursor: pointer; } .menu-btn { display: none; } #click { display: none; } @media (max-width:767px){ .menu-btn { display: block; } #click:checked ~ ul{ left: 0%; } nav ul{ position: fixed; top: 80px; left: -100%; background: #111; height: 100vh; width: 100%; display: block; text-align: center; transition: all ease-in-out 0.3s; } nav ul li{ margin: 40px 0; } nav ul li a{ font-size: 20px; } nav ul li a:hover, nav ul li a.active{ color: cyan; background: none; } nav .logo{ display: flex; justify-content: space-between; width: 100%; } }

Related: See More

Material Kit React

Questions / Comments: