"navbar"
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 lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>navbar</title> </head> <body> <header> <nav class="navbar navbar-expand-lg "> <div class="container "> <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a> <button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" > <span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span> </button> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5> <button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link px-3"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Properties</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Contact Us</a> </li> </ul> <div class="d-flex align-items-center nav-btn"> <a href="#" class="btn px-3" >Search</a> </div> </div> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link px-3"href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Properties</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Contact Us</a> </li> <div class="d-flex align-items-center nav-btn"> <a href="#" class="btn px-3" >Search</a> </div> </div> </ul> </nav> </header> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body{ margin: 0; padding: 0; overflow-x: hidden; } a, input, select, textarea,p { margin: 0; padding: 0; } html{ scroll-behavior: smooth; } /*-------------- navbar---------------------*/ header a.navbar-brand img { max-width: 80px; } header .navbar-nav .nav-item .nav-link { color: #000; font-size: 18px; font-weight: 500; } header .offcanvas-header .offcanvas-title img { max-width: 80px; } .nav-btn a { color: #fff; background: #000; font-size: 18px; font-weight: 500; width: 100%; } .nav-btn a:hover { color: #fff; } .offcanvas-header .close-btn { border: 0; background: transparent; top: 15px; position: absolute; right: 15px; color: #ffffff; background: #830606; padding: 5px 10px; }

Related: See More

Vue Black Dashboard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top
Transparent Sticky NavBar

Questions / Comments: