.jet-custom-nav {
max-width: 100%;
position: relative;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: stretch;
> .jet-custom-nav__item {
position: relative;
margin-bottom: 1px;
&.jet-custom-nav-mega-sub-position-top {
position: static;
}
> a {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding: 10px 15px;
background-color: #54595f;
transition: all .5s cubic-bezier(.48,.01,.5,.99);
}
}
.jet-custom-nav__item {
&.hover-state {
& > .jet-custom-nav__mega-sub,
& > .jet-custom-nav__sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
body[data-elementor-device-mode="mobile"] & {
height: auto;
}
}
}
}
.jet-menu-link-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: stretch;
color: white;
font-size: 14px;
.jet-custom-item-desc {
display: block;
font-size: 12px;
font-style: italic;
}
}
.jet-menu-icon {
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px 0 0;
color: white;
border-radius: 50%;
width: 22px;
height: 22px;
&:before {
font-size: 12px;
color: #7a7a7a;
}
svg {
fill: currentColor;
height: auto;
}
}
.jet-menu-badge {
margin: 0 0 0 10px;
width: 0;
.jet-menu-badge__inner {
padding: 3px 5px;
background-color: white;
color: #7a7a7a;
display: inline-block;
}
}
.jet-dropdown-arrow {
position: absolute;
right: 15px;
color: white;
font-size: 8px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: white;
&:before {
color: #7a7a7a;
}
}
&--dropdown-left-side {
> .jet-custom-nav__item,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__item {
> a {
text-align: right;
body:not(.rtl) & {
flex-direction: row-reverse;
}
.jet-menu-icon {
margin: 0 0 0 10px;
}
.jet-menu-badge {
direction: rtl;
margin: 0 10px 0 0;
}
.jet-dropdown-arrow {
left: 15px;
right: auto;
}
}
}
}
}
.jet-custom-nav__mega-sub,
.jet-custom-nav__sub {
display: block;
position: absolute;
margin: 0;
background-color: white;
list-style: none;
top: 0;
left: 100%;
box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
opacity: 0;
visibility: hidden;
transition: opacity .3s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear .1s;
pointer-events: none;
z-index: 99;
&:before {
content: '';
position: absolute;
top: 0;
right: 100%;
bottom: 0;
}
body[data-elementor-device-mode="mobile"] & {
position: relative;
min-width: 0 !important;
width: 100%;
box-sizing:border-box;
overflow: hidden;
left: 0;
height: 0;
&:before {
content: none;
}
}
body[data-elementor-device-mode="mobile"] .jet-custom-nav .jet-custom-nav__item:not(.hover-state) & {
padding: 0;
margin: 0;
border: none;
}
}
.jet-custom-nav__mega-sub {
width: 500px;
.jet-custom-nav--dropdown-left-side > .jet-custom-nav__item > & {
left: auto;
right: 100%;
&:before {
left: 100%;
right: auto;
}
}
body[data-elementor-device-mode="mobile"] & {
width: 100% !important;
max-width: 100%;
}
.elementor-editor-active .elementor.elementor-edit-mode & > .elementor > .elementor-inner {
margin-top: 0;
}
}
.jet-custom-nav__sub {
min-width: 250px;
&.inverse-side {
left: auto;
right: 100%;
&:before {
left: 100%;
right: auto;
}
}
.jet-custom-nav--dropdown-left-side > .jet-custom-nav__item > &,
.jet-custom-nav--dropdown-left-side > .jet-custom-nav__item > & & {
left: auto;
right: 100%;
&:before {
left: 100%;
right: auto;
}
&.inverse-side {
right: auto;
left: 100%;
&:before {
left: auto;
right: 100%;
}
}
}
.jet-custom-nav__item {
position: relative;
a {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding: 10px 15px;
background-color: #54595f;
transition: all .5s cubic-bezier(.48,.01,.5,.99);
.jet-menu-link-text {
color: white;
}
}
&.hover-state {
& > a {
background-color: #54595f;
.jet-menu-link-text {
color: white;
}
}
}
}
}
// Animations
.jet-custom-nav {
&--animation-none {
> .jet-custom-nav__item > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__sub {
transition: none;
}
}
&--animation-move-up {
> .jet-custom-nav__item > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__sub {
transform: translateY(20px);
transition: transform .2s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
body[data-elementor-device-mode="mobile"] & {
transform: translateY(0);
}
}
> .jet-custom-nav__item.hover-state > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item.hover-state.hover-state > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__item.hover-state > .jet-custom-nav__sub{
transform: translateY(0);
}
}
&--animation-move-down {
> .jet-custom-nav__item > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__sub {
transform: translateY(-20px);
transition: transform .2s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
body[data-elementor-device-mode="mobile"] & {
transform: translateY(0);
}
}
> .jet-custom-nav__item.hover-state > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item.hover-state.hover-state > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__item.hover-state > .jet-custom-nav__sub{
transform: translateY(0);
}
}
&--animation-move-left {
> .jet-custom-nav__item > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__sub {
transform: translateX(20px);
transition: transform .2s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
body[data-elementor-device-mode="mobile"] & {
transform: translateX(0);
}
}
> .jet-custom-nav__item.hover-state > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item.hover-state.hover-state > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__item.hover-state > .jet-custom-nav__sub{
transform: translateX(0);
}
}
&--animation-move-right {
> .jet-custom-nav__item > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__sub {
transform: translateX(-20px);
transition: transform .2s cubic-bezier(.48,.01,.5,.99) .1s,
opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
visibility 1s linear;
body[data-elementor-device-mode="mobile"] & {
transform: translateX(0);
}
}
> .jet-custom-nav__item.hover-state > .jet-custom-nav__mega-sub,
> .jet-custom-nav__item.hover-state.hover-state > .jet-custom-nav__sub,
> .jet-custom-nav__item > .jet-custom-nav__sub .jet-custom-nav__item.hover-state > .jet-custom-nav__sub{
transform: translateX(0);
}
}
}