Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Bootstrap navbar documentation
<nav class="navbar navbar-expand-lg navbar-light btco-hover-menu portfolio-nav">
<div class="container">
<!-- Logo Begin -->
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo" title="Logo"></a>
<!-- Logo End -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Landings<span><i class="fas fa-chevron-down ml-2"></i></span> </a>
<ul class="dropdown-menu megha-menu py-0 animate slideIn">
<div class="row">
<div class="col-lg-6 col-12">
<div class="nav-box">
<div class="text-center">
<h2>Build anything</h2>
<p class="text-light">Unique themes built by djain.</p>
<a href="#" class="btn btn-light mt-2">Read More</a> </div>
</div>
</div>
<!-- Col 6 End -->
<div class="col-lg-6 col-12">
<div class="row meghamenu-body">
<!-- Row Begin -->
<div class="col-lg-6 col-6">
<h6 class="menu-heading">Corporate</h6>
<li><a class="dropdown-item pad-top-20" href="agency.html">Agency</a></li>
<li><a class="dropdown-item" href="business.html">business</a></li>
<li><a class="dropdown-item" href="marketing.html">Marketing</a></li>
<h6 class="menu-heading pad-top-20 pad-bottom-10 ">App</h6>
<li><a class="dropdown-item" href="desktop.html">Desktop </a></li>
<li><a class="dropdown-item" href="app-landing.html">App Landing</a></li>
</div>
<!-- Col 6 End -->
<div class="col-lg-6 col-6">
<h6 class="menu-heading">Classic</h6>
<li><a class="dropdown-item pad-top-20" href="software.html">Software</a></li>
<li><a class="dropdown-item" href="portfolio.html">Portfolio</a></li>
<li><a class="dropdown-item" href="services.html">Services</a></li>
<h6 class="menu-heading pad-top-20 pad-bottom-10 ">Career</h6>
<li><a class="dropdown-item" href="job.html">Job</a></li>
<li><a class="dropdown-item" href="consulting.html">Consulting</a></li>
</div>
<!-- Col 6 End -->
</div>
<!-- row End -->
</div>
</div>
<!-- row End -->
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Pages<span><i class="fas fa-chevron-down ml-2"></i></span> </a>
<ul class="dropdown-menu animate slideIn">
<li> <a class="dropdown-item dropdown-toggle" href="#">Company<span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="about.html">Company About</a></li>
<li><a class="dropdown-item" href="company-service.html">Company Services</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Portfolio<span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="gallery-grid.html">Gallery Grid</a></li>
<li><a class="dropdown-item" href="gallery-grid-isotope.html">Gallery Grid Isotope</a></li>
<li><a class="dropdown-item" href="gallery-masonary.html">Gallery Masonary</a></li>
<li><a class="dropdown-item" href="gallery-masonary-isotope.html">Gallery Masonary Isotope</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Career<span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="job-listing.html">Listing</a></li>
<li><a class="dropdown-item" href="opning.html">Job Opening</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Login & Signup <span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="forgot-password.html">Forgot Password</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="sign-in-simple.html">Sign In Simple</a></li>
<li><a class="dropdown-item" href="sign-up-simple.html">Signup Simple</a></li>
<li><a class="dropdown-item" href="forgot-password-simple.html">Forgot Password Simple</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Contacts <span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="contact-us.html">Contact Us</a></li>
<li><a class="dropdown-item" href="contact-us-simple.html">Contact Us Simple</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Utilities<span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="pricing.html">Price</a></li>
<li><a class="dropdown-item" href="faq.html">FAQ</a></li>
<li><a class="dropdown-item" href="terms-conditions.html">Terms & Conditions</a></li>
<li><a class="dropdown-item" href="privacy-policy.html">Privacy & Policy</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Specialty <span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="coming-soon.html">Coming Soon</a></li>
<li><a class="dropdown-item" href="error-404.html">Error 404</a></li>
<li><a class="dropdown-item" href="maintenance.html">Maintenance Mode</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Blog<span><i class="fas fa-chevron-down ml-2"></i></span> </a>
<ul class="dropdown-menu animate slideIn">
<li> <a class="dropdown-item dropdown-toggle" href="#">Sidebar Blog<span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="right-sidebar-list.html">Right Sidebar List</a></li>
<li><a class="dropdown-item" href="right-sidebar-grid.html">Right Sidebar Grid</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="left-sidebar-list.html">Left Sidebar List</a></li>
<li><a class="dropdown-item" href="left-sidebar-grid.html">Left Sidebar Grid</a></li>
</ul>
</li>
<li> <a class="dropdown-item dropdown-toggle" href="#">Full Width Blog <span class="float-right"><i class="fas fa-angle-right"></i></span></a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="full-width-list.html">Full Width List</a></li>
<li><a class="dropdown-item" href="full-width-grid.html">Full Width Grid</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="single-blog.html">Single Blog</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> shop<span><i class="fas fa-chevron-down ml-2"></i></span> </a>
<ul class="dropdown-menu animate slideIn">
<li><a class="dropdown-item" href="#">Classic</a></li>
<li><a class="dropdown-item" href="#"> Sidebar Menu</a></li>
<li><a class="dropdown-item" href="#">Categories</a></li>
<li><a class="dropdown-item" href="#">Products Grid</a></li>
<li><a class="dropdown-item" href="#"> List of Product</a></li>
</ul>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Demo</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Docs</a> </li>
<li class="nav-item"> <a class="btn btn-primary ml-3" href="#">Buy Now</a> </li>
</ul>
</div>
</div>
</nav>