<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-md navbar-dark bg-dark"> <div class="container"> <div class="navbar-brand"><a href="#" class="nav-link p-0">Logo</a></div> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#main-nav-1" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="main-nav-1"> <ul class="navbar-nav"> <li class="nav-item dropdown position-static"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="#">MegaMenu</a> <div class="dropdown-menu w-100 top-auto"> <div class="container"> <div class="row w-100"> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Individuals</h4> <a href="#" class="dropdown-item">Windows Application</a> <a href="#" title="Windows Application" href="#" class="dropdown-item">Windows Application</a> <a title="Android App" href="#" class="dropdown-item">Android App</a> <a title="FireFox Extension" href="#" class="dropdown-item">FireFox Extension</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Website Owners</h4> <a title="WordPress Plugin" href="#" class="dropdown-item">WordPress Plugin</a> <a title="Drupal Module" href="#" class="dropdown-item">Drupal Module</a> <a title="Joomla Extension" href="#" class="dropdown-item">Joomla Extension</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Developers</h4> <a title="JavaScript Library" href="#" class="dropdown-item">JavaScript Library</a> <a title="TinyMCE Plugin" href="#" class="dropdown-item">TinyMCE Plugin</a> <a title="CKEditor Plugin" href="#" class="dropdown-item">CKEditor Plugin</a> </div> <div class="text-center col-sm-3"> <h4 class="border border-top-0 border-right-0 border-left-0">For Website Owners</h4> <a title="WordPress Plugin" href="#" class="dropdown-item">WordPress Plugin</a> <a title="Drupal Module" href="#" class="dropdown-item">Drupal Module</a> <a title="Joomla Extension" href="#" class="dropdown-item">Joomla Extension</a> </div> </div> </div> </div> </li> <li class="nav-item"><a title="Blog" href="#" class="nav-link">Blog</a> </li> <li class="nav-item"><a title="Contact Us" href="#" class="nav-link">Contact Us</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a title="My Account" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link">My Account</a> <ul class="dropdown-menu"> <li class="nav-item"> <a title="Login / Register" href="#" class="dropdown-item">Login / Register</a> </li> <li class="nav-item"> <a title="Account details" href="#" class="dropdown-item">Account details</a> </li> <li class="nav-item"> <a title="Orders" href="#" class="dropdown-item">Orders</a> </li> </ul> </li> </ul> </div> </div> </nav>

.top-auto{top:auto}