<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Megamenu.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<header>
<div class="container custom-width-container">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown megamenu">
<a class="nav-link dropdown-toggle" href="products.php" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu largemenu" aria-labelledby="navbarDropdown">
<div class="menu-item">
<a class="dropdown-item main-tittle" href="product-details.php">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="product-details.php">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="product-details.php">Product Menu Goes Here</a>
<a class="dropdown-item" href="product-details.php">Product Menu Goes Here</a>
<a class="dropdown-item" href="product-details.php">Another Product menu Goes Here</a>
<a class="dropdown-item" href="product-details.php">Another Product menu Goes Here</a>
<a class="dropdown-item" href="product-details.php">Some Product menu Goes</a>
<a class="dropdown-item" href="product-details.php">Training</a>
<a class="dropdown-item" href="#">Product Goes Here</a>
<a class="dropdown-item" href="#">Open Reversible</a>
<a class="dropdown-item" href="#">Other</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item main-tittle" href="#">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="#">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item main-tittle" href="#">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="#">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Some Product menu Goes</a>
<a class="dropdown-item" href="#">Product menus</a>
<a class="dropdown-item" href="#">Product Goes Here</a>
<a class="dropdown-item" href="#">Open Reversible</a>
<a class="dropdown-item" href="#">Other</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item main-tittle" href="#">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="#">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Some Product menu Goes</a>
<a class="dropdown-item" href="#">Product menus</a>
<a class="dropdown-item" href="#">Product Goes Here</a>
<a class="dropdown-item" href="#">Open Reversible</a>
<a class="dropdown-item" href="#">Other</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item main-tittle" href="#">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="#">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item main-tittle" href="#">Main Product Tittle</a>
<a class="dropdown-item sub-tittle" href="#">Sub Product Tittle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Product Menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Another Product menu Goes Here</a>
<a class="dropdown-item" href="#">Some Product menu Goes</a>
<a class="dropdown-item" href="#">Product menus</a>
<a class="dropdown-item" href="#">Product Goes Here</a>
<a class="dropdown-item" href="#">Open Reversible</a>
<a class="dropdown-item" href="#">Other</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="services.php">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificates.php">Certificates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="policies.php">Policies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact Us</a>
</li>
</ul>
<div class="my-2 my-lg-0">
<a class="nav-text-right my-2 my-sm-0"><i class="fas fa-circle"></i> Your safety is our priority</a>
</div>
</div>
</nav>
</div>
</header> <div class="jumbotron mainbanner">
<div class="container custom-width-container">
<div class="banner-content">
<h1>Simple Bootstrap 4 Megamenu </h1>
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<section class="container custom-width-container bottom-blocks">
<div class="row">
<div class="col-md-4">
<div class="content-box">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!</p>
</div>
</div>
<div class="col-md-4">
<div class="content-box">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!</p>
</div>
</div>
<div class="col-md-4">
<div class="content-box">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ipsum corporis est autem quae cum eligendi minima, harum ullam voluptate perferendis consequatur dolorem quis nisi, eaque inventore. Aliquid, maxime, sequi!</p>
</div>
</div>
</div>
</section>
<footer>
<section class="container custom-width-container footer-content">
<p>All the rights reserved to Bootstrap Megamenu 2019</p>
</section>
</footer>
<div class="menu-overlay"></div>
</body>
</html>
nav .nav-item.dropdown.megamenu {
position: static !important;
/* width */
/* Track */
/* Handle */
/* Handle on hover */
}
@media (max-width: 991px) {
nav .nav-item.dropdown.megamenu {
position: relative;
}
}
nav .nav-item.dropdown.megamenu .dropdown-divider {
height: 0;
margin: 0.3rem 0;
overflow: hidden;
border-top: 0px;
}
nav .nav-item.dropdown.megamenu .largemenu {
width: 100%;
overflow-y: scroll;
max-height: 350px;
border-radius: 0px;
}
@media (min-width: 991px) {
nav .nav-item.dropdown.megamenu .largemenu {
margin-top: 0px !important;
}
}
nav .nav-item.dropdown.megamenu .largemenu .menu-item {
width: 100%;
}
nav .nav-item.dropdown.megamenu .largemenu .menu-item .dropdown-item {
padding: 0px 1.5rem;
}
nav .nav-item.dropdown.megamenu .largemenu .menu-item .dropdown-item:hover {
color: #f58220;
text-decoration: underline;
background-color: transparent;
}
nav .nav-item.dropdown.megamenu .largemenu .menu-item .dropdown-item.main-tittle {
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
}
nav .nav-item.dropdown.megamenu .largemenu .menu-item .dropdown-item.sub-tittle {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
@media (min-width: 991px) {
nav .nav-item.dropdown.megamenu .largemenu .menu-item {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 1px solid #f58220;
-moz-column-rule: 1px solid #f58220;
column-rule: 1px solid #f58220;
}
}
nav .nav-item.dropdown.megamenu ::-webkit-scrollbar {
width: 5px;
}
nav .nav-item.dropdown.megamenu ::-webkit-scrollbar-track {
background: #f1f1f1;
}
nav .nav-item.dropdown.megamenu ::-webkit-scrollbar-thumb {
background: #888;
}
nav .nav-item.dropdown.megamenu ::-webkit-scrollbar-thumb:hover {
background: #555;
}
.down-arrow {
display: inline-block;
margin-top: 10px;
}
.dropdown-toggle::after {
display: none !important;
}
.dropdown-toggle {
float: left;
}
.down-arrow:before {
content: "\f107";
margin-left: 0px;
width: 24px;
text-align: center;
border: 0px;
font-family: FontAwesome;
vertical-align: baseline;
margin-right: 10px;
}
.nav-item.dropdown.open .dropdown-menu {
display: block;
}
@media (max-width: 991px) {
.down-arrow:before {
content: "\f107";
width: 24px;
background-color: #e8e8e8;
text-align: center;
border: 0px;
font-family: FontAwesome;
vertical-align: baseline;
padding: 5px 10px;
margin-left: 10px;
}
}
jQuery(document).ready(function($) {
// $('[data-toggle="slide-collapse"]').on('click', function () {
// $navMenuCont = $($(this).data('target'));
// $navMenuCont.animate({
// 'width': 'toggle'
// }, 350);
// $(".menu-overlay").fadeIn(500);
// });
// $(".menu-overlay").click(function (event) {
// $(".navbar-toggler").trigger("click");
// $(".menu-overlay").fadeOut(500);
// });
$('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({
'width': 'toggle'
}, 350);
$(".menu-overlay").fadeIn(500);
});
$('[data-toggle="dropdown"]').after('<span class="down-arrow"></span>');
$(".menu-overlay").click(function(event) {
$(".navbar-toggler").trigger("click");
$(".menu-overlay").fadeOut(500);
});
var windowWidth = $(window).width();
if (windowWidth > 991) {
$('ul.navbar-nav li.dropdown').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('ul.navbar-nav li.dropdown-submenu').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
$('.dropdown a').removeAttr("data-toggle");
$('.dropdown a').removeAttr("data-toggle");
$('span.down-arrow').attr("data-toggle", "dropdown");
if (windowWidth < 991) {
$('span.down-arrow').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
// $('span', this).toggleClass("down-arrow up-arrow");
});
}
});
