In this mega menu design demo we are also display header with logo. this mega menu is fully responsive. this is multi level mega menu example. you can simply use in you project. in this mega menu multiple parts available. you can use in product mega menu.

We allows to free snippets of bootstrap mega menu with submenu , you can download full code of bootstrap vertical mega menu layout. Here in this post i will give you example of bootstrap mega menu on hover snippet and you will get simple code of html, css and jquery. In bootstrap mega menu full width snippet i give you three tab with html, css and js, you can easily get code of responsive mega menu bootstrap free download layout.


<!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> <body class="bg-info"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light pt-0 pb-0"> <a class="navbar-brand" href="#">Your Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav nav-main mr-auto"> <li class="nav-item"> <div class="dropdown"> <a class="nav-link dropbtn" href="#">Appliance</a> <div class="dropdown-content"> <div class="row"> <div class="col-lg-3 col-12 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Washing Machine</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Full automatic load</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Semi automatic load</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Full automatic front load</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Refrigerators</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Single door</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Double door</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Triple door</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>TVs</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Samsung</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lyod</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sansui</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Kitchen Appliance</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Ovens</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Mixer</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blenders</a> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> </li> <li class="nav-item"> <div class="dropdown"> <a class="nav-link dropbtn" href="#">Products</a> <div class="dropdown-content"> <div class="row"> <div class="col-lg-3 col-12 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Cloths</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Mens</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Womens</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Child</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Shoes</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Casual shoes</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sports shoes</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Formal Shoes</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Mobiles</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Oppo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Vivo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Nokia</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Laptop</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Lenovo</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Dell</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Apple</a> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> </li> <li class="nav-item"> <div class="dropdown"> <a class="nav-link dropbtn" href="#">Electronics & other</a> <div class="dropdown-content"> <div class="row"> <div class="col-lg-3 col-12 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Tablets</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Samsung</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Micromax</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Nokia</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Mobile Accessories</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Earphone</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Hands-free</a> </li> <li class="nav-item"> <a class="nav-link" href="#">OTG cable</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0 pr-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Watches</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Rado</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Fastrack</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Titan</a> </li> </ul> </div> </li> </ul> </div> <div class="col-lg-3 col-12 pl-0"> <ul class="navbar-nav mr-auto"> <li class="nav-item sub-drop-li w-100"> <div class="sub-dropdown"> <a class="nav-link dropbtn sub-main-menu" href="#"><strong>Bottom Wear</strong></a> <ul class="navbar-nav mr-auto w-100"> <li class="nav-item"> <a class="nav-link" href="#">Jeans</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Cargos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Trousers</a> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> </li> <li class="nav-item dropbtn"> <a class="nav-link" href="#">About us</a> </li> </ul> </div> </nav> </div> </body> </html>
body{ margin-top: 30px; background:#17A2B8; } nav{ line-height: 40px; } .dropbtn, .sub-drop-li { cursor: pointer; } .dropdown { position: unset; } .dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 160px; z-index: 1; min-width: 100% !important; left: 0px; top: 56px; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } .sub-dropdown { position: unset; } .sub-dropdown a{ line-height: 20px; } .sub-dropdown ul{ display: inline; } .sub-main-menu{ background-color: #8ED2C9; color: #fff !important; border-bottom:1px solid #fff; } @media (min-width: 320px) and (max-width: 768px) { .dropdown-content{ top: auto; height: 200px; overflow-y: scroll; overflow-x: hidden; position: static; } }




Random Post




Related Post

Responsive step menu design with header using html,css and bootstrap

Responsive step menu design with header using html,css and b...

Responsive submenu design using html and css. website header design with responsive submenu code example. you can easy implement in web page you can get code...

Read More
Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bootstrap 4 provide new deisgn of user profile. custom profile with social icon. i...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work with screen resolution less than 576px. ".col-sm-" class work with screen resol...

Read More