"navbar"
Bootstrap 4.1.1 Snippet by Poojathakur

<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 ----------> <header> <div class="top-header"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="left-top"> <a href="mailto:info@trushair.com"><i class="fa-solid fa-envelope"></i>info@trushair.com </a> </div> </div> <div class="col-lg-6"> <div class="right-top"> <a href="#" class="login">Log In</a> <a href="#" class="yellow-btn">Sign Up</a> </div> </div> </div> </div> </div> <nav class="navbar navbar-expand-lg navbar-dark"> <div class="container"> <a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" id="ChangeToggle"> <span class="navbar-toggler-icon" id="navbar-hamburger"></span> <div id="navbar-close" class="hidden"> <span class="close_ic"><i class="fa-solid fa-xmark"></i></span> </div> </button> <div class="collapse navbar-collapse" id="main_nav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li> <li class="nav-item"><a class="nav-link" href="#">Investment Property</a></li> <li class="nav-item"><a class="nav-link" href="#">How it work </a></li> <li class="nav-item"><a class="nav-link" href="#">Premium Services</a></li> <li class="nav-item"><a class="nav-link" href="#">contact us</a></li> <li class="nav-item"><a class="nav-link" href="#">log in</a></li> <li class="nav-item"><a class="nav-link" href="#">sign up</a></li> </ul> </div> <!-- navbar-collapse.// --> </div> <!-- container-fluid.// --> </nav> </header>
/* ========================================================================== Global Styles ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sen:wght@400;700;800&display=swap'); article, aside, details, video, figcaption, figure, footer, header, nav, section, summary { display: block; } html, body { width: 100%; scroll-behavior: smooth; } body { margin: 0; background: #000; height: 100%; font-family: 'Barlow', sans-serif; font-family: 'Sen', sans-serif; } ul li { margin: 0; padding: 0; } ul { padding: 0; margin: 0; } select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; text-indent: 1px; text-overflow: ""; } select::-ms-expand { display: none; } p { padding: 0; margin: 0; font-family: 'Barlow', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 30px; text-transform: capitalize; color: #545454; } a { outline: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } a:hover, a:focus, a:active { text-decoration: none; outline: none; color: #132953; } ul, ol { list-style: none; list-style-image: none; padding: 0; margin: 0; } select, input, button, a { outline: none; } button:focus { border: 0; outline: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: bold; font-family: 'Barlow', sans-serif; } h1 { font-family: 'Sen', sans-serif; font-style: normal; font-weight: 700; font-size: 50px; line-height: 60px; text-transform: capitalize; } h2 { font-family: 'Sen', sans-serif; font-style: normal; font-weight: 700; font-size: 44px; line-height: 60px; text-transform: capitalize; color: #000000; } h3 { font-family: 'Sen', sans-serif; font-style: normal; font-weight: 700; font-size: 22px; line-height: 26px; color: #000000; } a:hover { color: #DBBE5F; } img { width: 100%; } .py100 { padding-top: 100px; padding-bottom: 100px; } .pt100 { padding-top: 100px; } .pb100 { padding-bottom: 100px; } .main-bt { background: linear-gradient(95.58deg, rgba(248, 194, 72, 0.76) 5.52%, rgba(248, 221, 109, 0.83) 58.17%); border-radius: 5px; font-family: 'Barlow', sans-serif; font-style: normal; font-weight: 600; font-size: 18px; line-height: 22px; color: #000000; padding: 20px 48px; display: inline-block; margin-top: 20px; text-decoration: none; text-transform: uppercase; } a.main-bt:hover { background: #000; color: #fff; } /*===================navbar header css====================*/ /* ============ desktop view ============ */ @media all and (min-width: 992px) { .navbar .has-megamenu { position: static !important; } .navbar .megamenu { left: 0; right: 0; width: 100%; margin-top: 0; } } /* ============ desktop view .end// ============ */ /* ============ mobile view ============ */ @media(max-width: 991px) { .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse { overflow-y: auto; max-height: 90vh; margin-top: 10px; } } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; background: #fff; transition: ease-in-out 0.5s; border: none; box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; justify-content: end; } } nav.navbar { padding: 0; display: flex; align-items: center; } .mega-one ul li a { text-decoration: none; } .navbar-dark .navbar-nav .nav-link { color: #fff; } .navbar-nav li:last-child, .navbar-nav li:nth-last-child(2) { display: none; }

Related: See More


Questions / Comments: