Bootstrap 4 Mega Menu Responsive and Mobile Friendly

A lightweight jQuery plugin to create Bootstrap 4 mega menu responsive and mobile friendly. The plugin creates horizontal navbar on the top of page with main navigation links. These links trigger the sub-menu as a mega dropdown. The core design of this mega menu is built with Bootstrap 4 CSS, however it can be fully customize.

Plugin Overview

Plugin: MDB Mega Menu
Author: Luiz Fernando de Santana
Licence: MIT Licence
Published: May 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 , Font Awesome 5 , and Material Design
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 1.96 MB

How to Use Bootstrap 4 Mega Menu Responsive

1. Load the jQuery, Bootstrap 4 framework and Font Awesome 5 into your webpage to getting started with MDB Mega Menu.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Popper Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>

<!-- Fontawesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

2. After that, include the MDB Mega Menu‘s CSS and JavaScript file.

<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

3. Create HTML structure for mega menu as follows and add your navigation links into it.

<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">
   <!-- <a class="navbar-brand text-uppercase" href="#">Home</a>
      <a class="navbar-brand text-uppercase" href="#">O Instituto</a> -->
   <!-- Collapse button -->
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
      aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <!-- Collapsible content -->
   <div class="collapse navbar-collapse" id="navbarSupportedContent2" style="margin: 0 auto; width: 1200px;">
      <!-- Links -->
      <ul class="navbar-nav mr-auto" style="margin: 0 auto;">
         <li>
            <a href="#" class="navbar-brand text-uppercase">Home</a>
         </li>
         <li>
            <a href="#" class="navbar-brand text-uppercase">O Instituto</a>
         </li>
         <!-- Retiros e Cursos -->
         <li class="nav-item dropdown mega-dropdown">
            <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" 
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Retiros e Cursos
            </a>
            <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
               aria-labelledby="navbarDropdownMenuLink3">
               <div class="row">
                  <div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Cursos em Destaque</h6>
                     <!--Featured image-->
                     <a href="#!" class="view overlay z-depth-1 p-0 mb-2">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg"
                           class="img-fluid" alt="First sample image">
                        <div class="mask rgba-white-slight"></div>
                     </a>
                     <!-- <a class="news-title font-weight-bold pl-0" href="#">Lorem ipsum dolor sit</a> -->
                     <!-- <p class="font-small text-uppercase white-text">
                        <i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i
                          class="far fa-comments px-1" aria-hidden="true"></i> 20
                        </p> -->
                  </div>
                  <div class="col-md-4 col-xl-3 sub-menu mb-md-0 mb-4">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Retiros de Autoconhecimento</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Sobre a Jornada de Autotransformação
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada Intensiva: Retiro Desperte o Essencial
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada Parcial: Retiro Mente Consciente
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada Parcial: Retiro Essência do Ser
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada Parcial: Retiro Propósito Maior
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada Parcial: Retiro O Gigante Interior
                           </a>
                        </li>
                     </ul>
                  </div>
                  <div class="col-md-4 col-xl-3 sub-menu mb-0">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Cursos Presenciais</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Workshop Consciencia Financeira
                           </a>
                        </li>
                     </ul>
                  </div>
                  <div class="col-md-4 col-xl-3 sub-menu mb-0">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Cursos Online</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Jornada de Autoconhecimento 
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
         <!-- Features -->
         <li class="nav-item dropdown mega-dropdown active">
            <a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">Soluções Corporativas
            <span class="sr-only">(current)</span>
            </a>
            <div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"
               aria-labelledby="navbarDropdownMenuLink2">
               <div class="row">
                  <div class="col-md-6 col-xl-4 sub-menu mb-xl-0 mb-4">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Projetos</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Essenz nas Empresas
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Desenvolvimento de Equipe
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Meditação In Company
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Palestras
                           </a>
                        </li>
                     </ul>
                  </div>
                  <div class="col-md-6 col-xl-4 sub-menu mb-xl-0 mb-4">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Desenvolvimento de Liderança</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Sobre o Programa
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Líder de Si Mesmo
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Liderando Outros
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Liderando Organizações
                           </a>
                        </li>
                     </ul>
                  </div>
                  <div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-xl-0 mb-4">
                     <h6 class="sub-title text-uppercase font-weight-bold white-text">Treinamentos</h6>
                     <ul class="list-unstyled">
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Gestão de Conflitos
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Gestão de Tempo
                           </a>
                        </li>
                        <li>
                           <a class="menu-item pl-0" href="#!">
                           <i class="fas fa-caret-right pl-1 pr-3"></i>Negociação interpessoal
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </li>
         <li>
             
         </li>
         <li>
            <a href="#" class="navbar-brand text-uppercase">Blog</a>
         </li>
         <li>
            <a href="#" class="navbar-brand text-uppercase">Agenda</a>
         </li>
         <li>
            <a href="#" class="navbar-brand text-uppercase">Contato</a>
         </li>
      </ul>
      <!-- Links -->
      <!-- Search form -->
      <!-- <form class="form-inline">
         <div class="md-form my-0">
           <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
         </div>
         </form> -->
   </div>
   <!-- Collapsible content -->
</nav>

4. Some additional CSS styles to adjust / customize MDB Mega Menu.

.dropdown-menu {
    width: 1130px;
}

.navbar-brand {
    font-size: 16px;
    line-height: 30px;
}

.mega-menu {
    margin: 0 -450px;
}

.navbar .dropdown-menu a {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    padding: 0;
}

.navbar .dropdown-menu h6 {
    color: #ffc107!important;
}