<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 ----------> <!-- TEMPLATE ORIGINALLY FROM : https://www.cssscript.com/header-navbar-templates/ I modified it and made it compatible with bootstrap 3 - 5.0 Check me out @ https://fb.me/simon.ugorji.7 Have fun using it! --> <!--Add fontawesome --> <!-- Header Start --> <header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="./" class="brand">BRAND NAME</a> <nav class="nav"> <button class="nav__toggle navbar-toggler" aria-expanded="false" type="button"> <span class="fas fa-bars nav-toggler-icon"></span> </button> <ul class="nav__wrapper m-0" style="list-style-type: none;"> <!-- margin: 0px !important; --> <li class="nav__item"><a href="#">Home</a></li> <li class="nav__item"><a href="#">What we do</a></li> <li class="nav__item dropdown"> <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">A Link Here</a></li> <li><a class="dropdown-item" href="#">Another Link Here</a></li> <li><a class="dropdown-item" href="#">Another Link Here</a></li> </ul> </li> <li class="nav__item"><a href="#">About</a></li> <li class="nav__item"><a href="#">Contact</a></li> </ul> </nav> </div> </header> <!-- Header End -->

/* ** The Header Media Queries ** ** Tweak as per your needs ** */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); .wrapper { max-width: 1140px; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; } *, *:before, *:after { box-sizing: border-box; } a { text-decoration: none; color: #222; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Roboto", sans-serif; } .sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } .button { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #fff; background-color: #2fa0f6; min-width: 120px; padding: 0.5rem 1rem; border-radius: 5px; text-align: center; } .button svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; fill: #fff; } .button span { display: none; } @media (min-width: 600px) { .button span { display: initial; } } .button--icon { min-width: initial; padding: 0.5rem; } .brand { font-weight: bold; font-size: 20px; } /** MOBILE VIEW **/ .site-header { position: relative; background-color: #ef00911c; z-index: 9999999; } .site-header__wrapper { padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 600px) { .site-header__wrapper { display: flex; justify-content: space-between; align-items: center; padding-top: 0; padding-bottom: 0; } } @media (min-width: 600px) { .nav__wrapper { display: flex; } } @media (max-width: 599px) { .nav__wrapper { position: absolute; top: 100%; right: 0; left: 0; z-index: -1; background-color: #ffe7f5; /*** Change the background color of the navbar header **/ visibility: hidden; opacity: 0; transform: translateY(-100%); transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .nav__wrapper.active { visibility: visible; opacity: 1; transform: translateY(0); } } .nav__item a { display: block; padding: 1.5rem 1rem; } .nav__item a:hover{ color:#f10087; } .nav__toggle { display: none; } .navbar-light .navbar-toggler{ border-color:transparent; background-color: #ef00911c; } .navbar-toggler:focus{ box-shadow:none !important; /** this removes the black border around the nav toggler buttons **/ } button.navbar-toggler{ border: 1px solid #fee3f3; background-color: #f1466814; border-radius: 5px; } .nav-toggler-icon{ color :#f10087; } @media (max-width: 599px) { .nav__toggle { display: block; position: absolute; right: 1rem; top: 1rem; } }

let navToggle = document.querySelector(".nav__toggle"); let navWrapper = document.querySelector(".nav__wrapper"); navToggle.addEventListener("click", function () { if (navWrapper.classList.contains("active")) { this.setAttribute("aria-expanded", "false"); this.setAttribute("aria-label", "menu"); navWrapper.classList.remove("active"); } else { navWrapper.classList.add("active"); this.setAttribute("aria-label", "close menu"); this.setAttribute("aria-expanded", "true"); } });