/* 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
});
