<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 ----------> <nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm"> <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">MegaMenu</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarContent" class="collapse navbar-collapse"> <ul class="navbar-nav mx-auto"> <!-- Megamenu--> <li class="nav-item dropdown megamenu"><a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Mega Menu</a> <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0"> <div class="container"> <div class="row bg-white rounded-0 m-0 shadow-sm"> <div class="col-lg-7 col-xl-8"> <div class="p-4"> <div class="row"> <div class="col-lg-6 mb-4"> <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-lg-6 mb-4"> <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-lg-6 mb-4"> <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-lg-6 mb-4"> <h6 class="font-weight-bold text-uppercase">MegaMenu heading</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> </div> </div> </div> <div class="col-lg-5 col-xl-4 px-0 d-none d-lg-block" style="background: center center url(https://res.cloudinary.com/mhmd/image/upload/v1556990826/mega_bmtcdb.png)no-repeat; background-size: cover;"></div> </div> </div> </div> </li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li> </ul> </div> </nav> <!-- For demo purpose --> <section class="py-5 text-white"> <div class="container py-4"> <div class="row"> <div class="col-lg-8 mx-auto text-center"> <h1 class="display-4">Bootstrap 4 megamenu</h1> <p class="lead mb-0">A very simple way to create Bootstrap 4 megamneu. </p> <p class="lead">Snippet by <a href="https://bootstrapious.com/snippets" class='text-white'><u>Bootstrapious</u></a>. </p> </div> </div> <div class="row pt-5"> <div class="col-lg-10 mx-auto"> <p class="lead">Use the default Bootstrap's dropdown menu to hold your megamneu.</p> <p class="lead">Set the <code>.dropdown</code> position to <code>static</code> instead of <code>absolute</code>.</p> <p class="lead">We use the class <code>.megamenu</code> to hold this <code>static</code> position.</p> </div> </div> </div> </section> <!-- End -->

/* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ .megamenu { position: static; } .megamenu .dropdown-menu { background: none; border: none; width: 100%; } /* * * ========================================== * FOR DEMO PURPOSES * ========================================== * */ body { background: #eaafc8; background: -webkit-linear-gradient(to right, #eaafc8, #654ea3); background: linear-gradient(to right, #eaafc8, #654ea3); min-height: 100vh; } code { color: #745eb1; background: #fff; padding: 0.1rem 0.2rem; border-radius: 0.2rem; } .text-uppercase { letter-spacing: 0.08em; }