<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 ----------> <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3 shadow-sm fixed-top"> <a href="#" class="navbar-brand font-weight-bold mr-auto">Logo</a> <div id="navbarContent" class="collapse navbar-collapse order-sm-12 order-lg-1"> <ul class="navbar-nav ml-auto"> <!-- Megamenu--> <li class="nav-item dropdown megamenu"><a id="megamenu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Dropdown Menu</a> <div aria-labelledby="megamenu" class="dropdown-menu border-0 p-0 m-0"> <div class="container-fluid"> <div class="row bg-dark text-light rounded-0 m-0 shadow-sm"> <div class="col-12"> <div class="p-4"> <div class="row"> <div class="col-sm-6 col-lg-3 mb-4"> <h6 class="font-weight-bold text-uppercase">Heading 1</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="#" class="nav-link text-small pb-0">Unique Features</a></li> <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="#" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-sm-6 col-lg-3 mb-4"> <h6 class="font-weight-bold text-uppercase">Heading 2</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-sm-6 col-lg-3 mb-4"> <h6 class="font-weight-bold text-uppercase">Heading 3</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> <div class="col-sm-6 col-lg-3 mb-4"> <h6 class="font-weight-bold text-uppercase">Heading 4</h6> <ul class="list-unstyled"> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Unique Features</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Image Responsive</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Auto Carousel</a></li> <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Newsletter Form</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li> <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li> </ul> </div> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler order-md-1"> <span class="navbar-toggler-icon"></span> </button> </nav> <header> </header> <main> <div class="container py-5"> <div class="row text-center"> <div class="col-12"> <h1>Bootstrap 4 Navbar</h1> <p class="lead">Display Submenu on Hover</p> </div> </div> </div> </main> <footer> <div class="container py-5"> <div class="row"> <div class="col-12 text-center"> <hr> <p><a href="https://reezhdesign.com/">ReeZh Design</a></p> </div> </div> </div> </footer>

/* * Main theme */ header { min-height: 100px; } main { min-height: 100vh; } footer { min-height: 100px; } .container-fluid { margin: 0; padding: 0; .row { margin: 0; padding: 0; } } /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ .dropdown { &:hover { > .dropdown-menu { display: block; } } } .megamenu { position: static; .dropdown-menu { border: none; width: 100%; } }

function toggleDropdown (e) { const _d = $(e.target).closest('.dropdown'), _m = $('.dropdown-menu', _d); setTimeout(function(){ const shouldOpen = e.type !== 'click' && _d.is(':hover'); _m.toggleClass('show', shouldOpen); _d.toggleClass('show', shouldOpen); $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen); }, e.type === 'mouseleave' ? 300 : 0); } $('body') .on('mouseenter mouseleave','.dropdown',toggleDropdown) .on('click', '.dropdown-menu a', toggleDropdown);