whmcsCrosterTemplates/assets/less/mega-menu.less

//Mega Menu
//------------------------

@mega-border-color: @default-border-color;
@mega-text-color: @navTopLink;

.dropdown-menu {
	li {
		a {
			span {
				&.item {
					span {
						display: block;
						font-size: 90%;
						opacity: 0.50;
					}
				}
			}
		}
	}
	&.dropdown-mega {
		border-radius: 0;
		.mega-menu {
			ul {
				li {
					margin-bottom: 13px;
					a {
						padding: 0!important;
					}
					&.menu-divider {
						height: 1px;
						margin: 9px 0;
						overflow: hidden;
						background-color: #e5e5e5;
						a {
							visibility: hidden;
						}
					}
				}
			}
			.item-with-icons {
				padding: 0;
				margin-bottom: 13px;
				border: 0 none;	
				.item-icon {
					font-size: 25px;
				}
				.menu-name {
					font-size: 18px;
				}				
			}
		}
		
		&:after {
			display: none!important;
		}
		
		.html-item {
			a {
				display: block;
				padding: 0!important;
				img {
					transition: all 0.3s ease-in-out;
						
					&:hover, &:focus {
						transform: scale(1.03);
					}
				}
				&:hover, &:focus {
					background-color: transparent!important;
					
				}
			}
		}
		

	}
}

.mega-menu {
  ul {
	padding:0; margin: 0;
	list-style:none;
	li {
		border:none !important;
			a {
				display:block;
				position: relative;
				text-decoration: none;
				color: @mega-text-color;
				transition: all 0.3s ease-in-out;
				&:hover, &:focus {
					color: @themeColor!important;
					background-color: transparent !important;
					margin-left: 3px;
				}
			}
		}
	}
	.menu-small-box {
		border-radius: 4px;
		transition: all 0.3s ease-in-out;
		&.col-html {
			.item-with-icons, .item-icon, .menu-name {
				display: none;
			}
		}
	}
	.item-with-icons {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid @default-border-color;		
		.item-icon {
			font-size: 15px;
			margin-right: 8px;
			opacity: 0.50;
		}
		.menu-name {
			font-size: 15px;
			white-space: nowrap;
		}
	}
	
	h4 {
		margin: 0;		
		span {
			display: block;
			font-size: @baseFontSize;
			font-weight: normal;
			opacity: 0.50;
		}
	}
	
	.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
		display: block;
	}
  
}

@media (max-width: 991px) {
	.@{brand}-navbar {
		&.@{brand}-mega {
			&.submenu1 .navbar-nav li ul.dropdown-menu:after,
			&.submenu1 .navbar-nav li.open ul.dropdown-menu:after,
			&.submenu2 .navbar-nav li ul.dropdown-menu:after,
			&.submenu2 .navbar-nav li.open ul.dropdown-menu:after {
				display: none;
			}
			.navbar-collapse {
				.dropdown {
					.dropdown-toggle {
						.caret {
							float : right;
							border: 0 none;
							padding: 0;
							margin: 0;
										
							&:after {
								content: "\f107";
								font-family: "Font Awesome 5 Pro";
								font-style: normal;
								text-indent: 0px;
											
							}
						}			
					}
								
					&.open {
						a {
							.caret {
								&:after {
									content: "\f106";
								}
							}
						}
					}		
				}
			}
			
			.dropdown-megamenu {
				.dropdown-menu {
					.mega-menu {
						padding-bottom: 30px;
					}
				}
			}
		}
	}
}

@media (min-width: 992px) {
	.dropdown-megamenu {
		position: static!important;	
		.dropdown-menu {
			left: 0; right: 0;
			.mega-menu {
				padding: 30px 0 30px;
				min-width: 600px;
			}
		}
	}
}