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; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post