How to create Bootstrap-4 Responsive Mega Menu

Hey Guys,

Today I will write the code for the Bootstrap-4 responsive mega menu. This mega menu will be mobile-friendly. Here is a step by step code for the Bootstrap-4 responsive mega menu.


HTML

First we will write the HTML code for responsive mega menu. Here is the HTML code –

<header>


<div class="row">


<div class="col-lg-12 col-md-12 col-sm-12 col-12">


<nav class="navbar navbar-expand-lg">


<a class="navbar-brand" href="#"></a>


<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">


<span class="navbar-toggler-icon"></span>


</button>


<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav mx-auto">


<li class="nav-item dropdown">


<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Clubs</a>


<div class="dropdown-menu" aria-labelledby="navbarDropdown">


<div class="container">


<div class="row">

<div class="col-md-4">


 <span class="text-uppercase text-white megamenu-default-hd">Men's Clubs</span>                                                                                                           <ul class="nav flex-column">


<li class="nav-item">


<a class="nav-link active" href="#">Drivers</a>


</li> 

<li class="nav-item"> 

<a class="nav-link" href="#">Fairway Woods</a>                                        

</li>                                                                                                                

<li class="nav-item">  

<a class="nav-link" href="#">Hybrids</a>                                                    

</li>                                                                                                                 

<li class="nav-item">                                                                                          

<a class="nav-link" href="#">Irons</a>                                                       

</li>                                                                   

<li class="nav-item">                                                                                          

<a class="nav-link" href="#">Wedges</a>                                                    

</li>                                                                                                            

 <li class="nav-item">                                                                                              

 <a class="nav-link" href="#">Putters</a>                                                 

</li>        

<li class="nav-item">                                                                                            

<a class="nav-link" href="#">Package Sets</a>                                          

</li>                                                                                                              

</ul>                                                                                                     

</div>

<!-- /.col-md-4  -->

<div class="col-md-4">                                                                                        

<span class="text-uppercase text-white megamenu-default-hd">Women's Clubs</span>                                                                                                    

<ul class="nav flex-column">                                                                                

<li class="nav-item">                                                                                        

<a class="nav-link active" href="#">Drivers</a>                                           

</li>                                                                                                               

<li class="nav-item">                                                                                         

<a class="nav-link" href="#">Fairway Woods</a>                                          

 </li>                                                                                                              

<li class="nav-item">                                                                                         

<a class="nav-link" href="#">Hybrids</a>                                                    

</li>                                                                                                                

<li class="nav-item">                                                                                        

<a class="nav-link" href="#">Irons</a>                                                        

</li>                                                                                                                 

<li class="nav-item">                                                                                         

<a class="nav-link" href="#">Package Sets</a>                                             

</li>                                                                                                      

</ul>                                                                                                         

</div>

<!-- /.col-md-4  -->

<div class="col-md-4">

<span class="text-uppercase text-white megamenu-default-hd">Junior's Clubs</span>                                                                                                

<ul class="nav flex-column">                                                                               

<li class="nav-item">                                                                                        

<a class="nav-link active" href="#">Package Sets</a>                                     

</li>                                                                                                        

</ul>

</div>

<!-- /.col-md-4  -->

</div>

</div>

<!--  /.container  -->

</div>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Apparel</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<div class="container">

<div class="row">

<div class="col-md-4">

<span class="text-uppercase text-white megamenu-default-hd">Men's Clothing</span>                                                                                                           

<ul class="nav flex-column">                                                                               

<li class="nav-item">                                                                                            

<a class="nav-link active" href="#">Shirts</a>                                          

</li>                                                                                                             

<li class="nav-item">                                                                                            

<a class="nav-link" href="#">Shorts</a>                                                   

</li>                                                                                                              

<li class="nav-item">                                                                                            

<a class="nav-link" href="#">Pants</a>                                                   

 </li>                                                                                                                                    

<li class="nav-item">

<a class="nav-link" href="#">Innerwear</a>                                                                                                                                    

</li>

<li class="nav-item">

<a class="nav-link" href="#">Outerwear</a>

</li>

</ul>

</div>


<!-- /.col-md-4  -->

<div class="col-md-4">

<span class="text-uppercase text-white megamenu-default-hd">Women's Clothing</span>

<ul class="nav flex-column">                                                                                                                                 

<li class="nav-item">                                                                                                                                      

<a class="nav-link active" href="#">Shirts</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Shorts/Skirts/Skorts</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Pants</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Innerwear</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Outerwear</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Socks</a>

</li>                                                                                                                        

</ul>

</div>


<!-- /.col-md-4  -->


<div class="col-md-4">

                                                                                                                         

<span class="text-uppercase text-white megamenu-default-hd">Junior's Clothing</span>                                                                                                                      

<ul class="nav flex-column">                                                                                                                                   

<li class="nav-item">                                                                                                                                      

<a class="nav-link active" href="#">Shirts</a>                                                                                                                                    

</li>                                                                                                                                   

 <li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Shorts</a>                                                                                                                                    

</li>                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Pants</a>                                                                                                                                   

 </li>                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Innerwear</a>                                                                                                                                    

</li>                                                                                                                         

</ul>                                                                                                              

</div>

<!-- /.col-md-4  -->

</div>


</div>


 <!--  /.container  -->


</div>


</li>


<li class="nav-item dropdown">


<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shoes </a>


<div class="dropdown-menu" aria-labelledby="navbarDropdown">


<div class="container">


<div class="row">


<div class="col-md-4">                                                                                                       

<span class="text-uppercase text-white megamenu-default-hd">Menu-3</span>                                                                                                  

<ul class="nav flex-column">                                                                                

<li class="nav-item">                                                                                             

<a class="nav-link active" href="#">Active</a>                                          

</li>                                                                                                             

<li class="nav-item">                                                                                                 

<a class="nav-link" href="#">Link item</a>                                           

</li>                                                                                                              

<li class="nav-item">                                                                                           

<a class="nav-link" href="#">Link item</a>

</li>                                                                                                                

</ul>                                                                                                              

</div>


<!-- /.col-md-4  -->

<div class="col-md-4">                                                                                                                         

<span class="text-uppercase text-white megamenu-default-hd">Menu-3</span>                                                                                                                         

<ul class="nav flex-column">                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link active" href="#">Active</a>                                                                                                                                    

</li>                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Link item</a>                                                                                                                                    

</li>                                                                                                                                   

 <li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Link item</a>                                                                                                                                    

</li>                                                                                                                         

</ul>                                                                                                              

</div>

 <!-- /.col-md-4  -->

<div class="col-md-4">                                                                                                                         

<span class="text-uppercase text-white megamenu-default-hd">Menu-3</span>                                                                                                                        

<ul class="nav flex-column">                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link active" href="#">Active</a>                                                                                                                                   

 </li>                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Link item</a>                                                                                                                                    

</li>                                                                                                                                    

<li class="nav-item">                                                                                                                                       

<a class="nav-link" href="#">Link item</a>                                                                                                                                    

</li>                                                                                                                         

</ul>                                                                                                              

</div>

<!-- /.col-md-4  -->

</div>

</div>

<!--  /.container  -->

</div>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Balls & Gloves</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Bags & Trolleys</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Accessories</a>

 </li>

<li class="nav-item">

<a class="nav-link" href="#">Shop By Brand</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Promotions</a>

</li>

</ul>

</div>

</nav>


   </div>


  </div>


</header>

CSS-

Here is the CSS code for responsive mega menu. You can customize this according to your need.

<style>

header nav{

                 background:blue;

            }

            header .navbar .dropdown-menu div[class*="col"] {

               margin-bottom:1rem;

            }

            header .navbar .dropdown-menu {

              border:none;

              background-color:#0060c8!important;

            }

 

            /* Responsive Mega Menu Style */

            @media screen and (min-width: 992px) {

            header .navbar {

              padding-top:0px;

              padding-bottom:0px;

            }

            header .navbar .nav-item {

              padding:0 .5rem;

              margin:0 .25rem;

            }

            header .navbar .dropdown {position:static;}

 

            header .navbar .dropdown-menu {

              width:100%;

              left:0;

              right:0;

              top:40px;

              display:block;

              visibility: hidden;

              opacity: 0;

              transition: visibility 0s, opacity 0.3s linear;

            }

            header .navbar .dropdown:hover .dropdown-menu, header .navbar .dropdown .dropdown-menu:hover {

              display:block;

              visibility: visible;

              opacity: 1;

              transition: visibility 0s, opacity 0.3s linear;

            }

             header .navbar .dropdown-menu {

                        border: 1px solid rgba(0,0,0,.15);

                        background-color: #fff;

              }

 

            }

            header .megamenu-default-hd{

                        padding-left:20px;

            }

            header  .dropdown-menu ul li a{

                        color:#fff !important;

                        padding:3px 10px;

                        text-transform:capitalize;

            }

            header .dropdown-menu ul li a:hover{

                        color:#fff;

            }

            header .navbar-expand-lg .navbar-nav .nav-link{

                        color:#fff;

            }

            header  .dropdown-menu .row{

                        width:100%;

            }</style>

JS –

Here is the Javascript code for responsive mega menu for show on hover.

<script>

$(document).ready(function() {

    $(window).resize(function(){

        if ($(window).width() >= 980){           

            $(".navbar .dropdown-toggle").hover(function () {

               $(this).parent().toggleClass("show");

                   $(this).parent().find(".dropdown-menu").toggleClass("show");

         });

          $( ".navbar .dropdown-menu" ).mouseleave(function() {

                 $(this).removeClass("show"); 

         });

        }          

      });  

   });

</script>

Output -


How to create Bootstrap-4 Responsive Mega Menu




Post a Comment

0 Comments