<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="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <!--navigation bar starts--> <nav class="navbar navbar-expand-md bg-light navbar-light"> <!-- Brand --> <a class="navbar-brand" href="#"><img src="https://scontent.fdel3-1.fna.fbcdn.net/v/t1.0-9/59299122_2151996038201124_7867962104349720576_n.png?_nc_cat=106&_nc_sid=85a577&_nc_ohc=5Ufwd4l32C4AX9ZzX8u&_nc_ht=scontent.fdel3-1.fna&oh=2605e6535551b944a6b42fe41a2cd8ba&oe=5EB2FE51" alt="demo-logo" class="w-25"></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Company Details</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">About Company</a> <a class="dropdown-item" href="#">Roadmap</a> <a class="dropdown-item" href="#">One More Link</a> <a class="dropdown-item" href="#">Second More Link</a> </li> <li class="dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Company Services</a> <div class="dropdown-menu" id="m-menu"> <!--dropdown menu header--> <div class="header"> <h4>Heading Of The Mega Menu</h4> </div> <br> <div class="row"> <!--dropdwown menu row1--> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <h5>Category 1</h5> <a href="#" class="c-link">Link 1</a> <a href="#" class="c-link">Link 2</a> <a href="#" class="c-link">Link 3</a> </div> <!--dropdwown menu row2--> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <h5>Category 2</h5> <a href="#" class="c-link">Link 1</a> <a href="#" class="c-link">Link 2</a> <a href="#" class="c-link">Link 3</a> </div> <!--dropdwown menu row3--> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> <h5>Category 3</h5> <a href="#" class="c-link">Link 1</a> <a href="#" class="c-link">Link 2</a> <a href="#" class="c-link">Link 3</a> </div> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </div> </ul> </div> </nav> <!--navigation bar ends--> <!--navigation bar ends--> </div> </div> </div> </header>

#m-menu { left: -17pc; min-width: 37rem; padding-left: 50px; padding-right: 50px;} .c-link { display: block; margin-bottom: 15px;} .navbar-nav .nav-link { padding-left: 1.7rem !important; font-size: 17px !important;} .bg-light { background-color: #ffffff!important;} .w-25 { width: 12%!important;}