:root {
--main-bg-color: #f8f8f8;
--main-text-color: #333;
--hover-color: inherit;
--transition-time: 0.3s;
}
.custom-mega-menu {
position: relative;
transition: all 0.3s ease-in-out;
font-family: var(--e-global-typography-primary-font-family), Arial, sans-serif;
font-size: 16px;
color: var(--main-text-color);
}
.custom-mega-menu .menu-wrapper {
transition: all 0.3s ease-in-out;
}
.custom-mega-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.custom-mega-menu .mega-menu-top-level {
display: flex;
justify-content: center;
background-color: #fff;
}
.custom-mega-menu .mega-menu-item {
position: relative;
height: 50px;
}
.custom-mega-menu .mega-menu-item > a {
display: block;
padding: 15px 10px;
text-decoration: none;
white-space: nowrap;
transition: color var(--transition-time) ease, text-decoration var(--transition-time) ease;
color: var(--main-text-color);
}
.custom-mega-menu .sub-menu .mega-menu-item {
width: 100%;
text-align: left;
}
.custom-mega-menu .sub-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
min-width: 200px;
width: fit-content;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-time) ease, visibility var(--transition-time) ease, transform var(--transition-time) ease;
transform: translateY(20px);
pointer-events: none;
}
.custom-mega-menu .mega-menu-enabled > a::after {
content: '';
display: inline-block;
width: 24px;
height: 24px;
margin-left: 5px;
vertical-align: middle;
background-image: url(//amulettechnologies.com/wp-content/plugins/elementor-mega-menu-widget/includes/../assets/images/arrow.svg);
background-size: contain;
background-repeat: no-repeat;
transition: transform var(--transition-time) ease;
}
.custom-mega-menu .mega-menu-enabled .sub-menu {
position: fixed;
left: 0;
right: 0;
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
}
.custom-mega-menu .menu-item-has-children > a {
position: relative;
}
.custom-mega-menu .menu-item-has-children > a::after,
.custom-mega-menu .mega-menu-enabled > a::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 14px;
vertical-align: middle;
background-image: url(//amulettechnologies.com/wp-content/plugins/elementor-mega-menu-widget/includes/../assets/images/arrow.svg);
background-size: contain;
background-repeat: no-repeat;
}
.custom-mega-menu .mega-menu-content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-time) ease, visibility var(--transition-time) ease;
}
.custom-mega-menu .mega-menu-enabled .sub-menu > li {
width: 25%;
float: left;
padding: 0 10px;
}
.custom-mega-menu .hamburger-menu {
display: none;
position: absolute;
outline: none;
top: -20px;
right: 20px;
height: 44px;
width: 44px;
background: none;
border: none;
cursor: pointer;
z-index: 999;
}
.custom-mega-menu .hamburger-icon {
width: 25px;
height: 3px;
background-color: #333;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
}
.custom-mega-menu .hamburger-icon::before,
.custom-mega-menu .hamburger-icon::after {
content: '';
width: 25px;
height: 3px;
background-color: #333;
position: absolute;
left: 0;
transition: all 0.3s ease-in-out;
}
.custom-mega-menu .hamburger-icon::before {
top: -8px;
}
.custom-mega-menu .hamburger-icon::after {
top: 8px;
}
.custom-mega-menu .hamburger-menu.active .hamburger-icon {
display: none;
pointer-events: none;
cursor: not-allowed;
}
.custom-mega-menu .go-back {
display: none;
}
.custom-mega-menu .close-menu {
display: none;
position: absolute;
background: none;
border: none;
cursor: pointer;
outline: none; 
}
@media (min-width: 767px) {
.custom-mega-menu .menu-item-has-children:hover > .mega-menu-content {
opacity: 1;
visibility: visible;
}
.custom-mega-menu .mega-menu-item:hover > a {
background-color: transparent;
color: var(--hover-color);
text-decoration: underline;
}
.custom-mega-menu .sub-menu.active,
.custom-mega-menu .menu-item-has-children:hover > .sub-menu,
.custom-mega-menu .mega-menu-enabled:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.custom-mega-menu .sub-menu .sub-menu.active,
.custom-mega-menu .sub-menu .menu-item-has-children:hover > .sub-menu {
transform: translateX(0);
}
} @media (max-width: 767px) { .custom-mega-menu .hamburger-menu {
display: block;
}
.mega-menu-content-wrapper {
width: 400px !important;
max-width: 100% !important;
overflow-x: hidden;
}
.custom-mega-menu .close-menu {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
place-content: center;
height: 20px;
top: 70px;
right: 8.5%;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--main-text-color);
z-index: 1002;
}
.custom-mega-menu .mega-menu-top-level{
display: block;
position: fixed;
top: 0;
right: -100%; width: 80%;
max-width: 400px;
height: 100%;
overflow-y: auto;
transition: right 0.3s ease-in-out;
z-index: 1000;
padding-top: 100px;
}
.custom-mega-menu .mega-menu-top-level.active,
.custom-mega-menu .mega-menu-top-level .sub-menu.active {
right: 0; opacity: 1;
visibility: visible;
pointer-events: auto;
}
.custom-mega-menu .sub-menu {
transform: translateX(100%);
}
.custom-mega-menu .sub-menu.active {
transform: translateX(0);
}
.custom-mega-menu .sub-menu {
position: fixed;
top: 0;
right: -100%; left: auto;
width: 80%;
max-width: 400px;
height: 100%;
background-color: var(--main-bg-color);
overflow-y: auto;
transition: all 0.3s ease-in-out;
z-index: 1000;
padding-top: 30px;
}
.custom-mega-menu .menu-item-has-children.active > a,
.custom-mega-menu .menu-item-has-children.active > .sub-menu:not(.active) {
display: none;
}
.custom-mega-menu .mega-menu-enabled .sub-menu{
display: block;
width:400px;
top: 0 !important;
left: auto;
transition: all 0.3s ease-in-out;
}
.custom-mega-menu .mega-menu-enabled .sub-menu > li {
width: 100%;
float: none;
padding: 0;
}
.custom-mega-menu .mega-menu-enabled .sub-menu .e-con.e-flex {
--width: 100%;
--flex-wrap: var(--flex-wrap-mobile);
}
.custom-mega-menu .mega-menu-item > a {
padding: 15px 20px;
}
.custom-mega-menu .sub-menu:not(.active) {
opacity: 0;
visibility: hidden;
} .custom-mega-menu .mega-menu-top-level > .mega-menu-item {
width: 100%;
text-align: left; padding: 15px 20px; }
.custom-mega-menu .mega-menu-top-level .menu-item-has-children.active > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
max-height: none;
overflow: visible;
z-index: 1010;
} .custom-mega-menu .menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.custom-mega-menu .menu-overlay.active {
display: block;
}
.custom-mega-menu .mega-menu-item > a,
.custom-mega-menu .mega-menu-enabled > a {
position: relative;
padding: 15px 40px 15px 20px; }
.custom-mega-menu .menu-item-has-children > a::after,
.custom-mega-menu .mega-menu-enabled > a::after {
position: absolute;
right: 20px;
top: 35%;
}
.custom-mega-menu .go-back {
display: flex;
padding: 15px 20px;
cursor: pointer;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
}
.custom-mega-menu .go-back .back-arrow {
font-size: 20px;
margin-left: auto;
pointer-events: none;
}
.custom-mega-menu .go-back .submenu-title {
font-weight: bold;
flex-grow: 1;
text-align: left;
padding-right: 15px;
pointer-events: none;
}
.custom-mega-menu .mega-menu-item > a {
color: var(--mobile-text-color, var(--text-color));
}
body.menu-open {
overflow: hidden;
}
}
@media (max-width: 767px) {
.custom-mega-menu .mega-menu-top-level {
background: #f8f8f8 !important;
}
.custom-mega-menu .sub-menu {
background: #f8f8f8 !important;
}
.custom-mega-menu .mega-menu-content-wrapper {
background: #f8f8f8 !important;
}
.custom-mega-menu .menu-overlay {
background: rgba(0, 0, 0, 0.5) !important;
}
}