"Untitled"
Bootstrap 4.1.1 Snippet by sdanieli75

<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 ----------> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <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"> <li class="nav-item"> <a class="nav-link" href="#">Category</a> </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"> Category 1 </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">Category 1 </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"> <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"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action </p> </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"> Category 2 </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">Category 2 </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"> <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"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action </p> </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"> Category 3 </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">Category 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"> <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"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action </p> </div> <!-- /.col-md-4 --> </div> </div> <!-- /.container --> </div> </li> </ul> </div> </nav> </div>
/* adds some margin below the link sets */ .navbar .dropdown-menu div[class*="col"] { margin-bottom:1rem; } .navbar .dropdown-menu { border:none; background-color:#0060c8!important; } /* breakpoint and up - mega dropdown styles */ @media screen and (min-width: 992px) { /* remove the padding from the navbar so the dropdown hover state is not broken */ .navbar { padding-top:0px; padding-bottom:0px; } /* remove the padding from the nav-item and add some margin to give some breathing room on hovers */ .navbar .nav-item { padding:.5rem .5rem; margin:0 .25rem; } /* makes the dropdown full width */ .navbar .dropdown {position:static;} .navbar .dropdown-menu { width:100%; left:0; right:0; /* height of nav-item */ top:45px; } /* shows the dropdown menu on hover */ .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display:block!important; } .navbar .dropdown-menu { border: 1px solid rgba(0,0,0,.15); background-color: #fff; } }
$(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready // breakpoint and up $(window).resize(function(){ if ($(window).width() >= 980){ // when you hover a toggle show its dropdown menu //$(".navbar .dropdown-toggle").hover(function () { // $(this).parent().toggleClass("show"); // $(this).parent().find(".dropdown-menu").toggleClass("show"); // }); // hide the menu when the mouse leaves the dropdown //$( ".navbar .dropdown-menu" ).mouseleave(function() { // $(this).removeClass("show"); //}); // do something here } }); // document ready });

Related: See More


Questions / Comments: