.jet-nav {
display: flex;
flex-wrap: wrap;
direction: ltr;
.menu-item {
&-has-children {
position: relative;
}
&-link {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
&.menu-item-link-top {
justify-content: center;
padding: 8px 15px;
}
&-sub {
.jet-nav-arrow {
transform: rotate( -90deg );
}
}
}
}
&-item-desc{
display: block;
}
&-arrow {
margin-left: 10px;
}
&__sub {
position: absolute;
left: 0;
top: -999em;
visibility: hidden;
z-index: 999;
width: 200px;
background: #fff;
opacity: 0;
transform: translateY(20px);
transition: transform 200ms, opacity 200ms;
transition-timing-function: cubic-bezier(.17,.67,.83,.67);
.jet-mobile-menu.jet-nav-wrap & {
@media ( max-width: $sm-max ) {
position: static;
top: 0;
left: 0;
width: 100% !important;
transform: translateY(0);
display: none;
}
}
.jet-nav--vertical-sub-bottom & {
position: static;
top: 0;
left: 0;
width: 100%;
transform: translateY(0);
display: none;
}
.menu-item.jet-nav-hover > & {
opacity: 1;
transform: translateY(0);
.jet-mobile-menu.jet-nav-wrap & {
@media ( max-width: $sm-max ) {
display: block;
}
}
.jet-nav--vertical-sub-bottom & {
display: block;
}
}
.menu-item.jet-nav-hover > &,
.menu-item.jet-nav-hover-out > & {
top: 0;
left: 100%;
visibility: visible;
.jet-nav--vertical-sub-left-side & {
left: auto;
right: 100%;
}
}
&.jet-nav-depth-0 {
.menu-item.jet-nav-hover > &,
.menu-item.jet-nav-hover-out > & {
top: 100%;
left: 0;
.jet-nav--vertical & {
top: 0;
left: 100%;
}
.jet-nav--vertical-sub-left-side & {
left: auto;
right: 100%;
}
}
}
}
// Horizontal Menu ( RTL )
&--horizontal {
@if $direction == rtl {
flex-direction: row-reverse;
.jet-nav__sub {
left: auto;
right: 0;
}
.menu-item.jet-nav-hover > .jet-nav__sub,
.menu-item.jet-nav-hover-out > .jet-nav__sub {
left: auto;
right: 100%;
}
.menu-item.jet-nav-hover > .jet-nav__sub.jet-nav-depth-0,
.menu-item.jet-nav-hover-out > .jet-nav__sub.jet-nav-depth-0 {
left: auto;
right: 0;
}
.menu-item {
&-link-sub {
.jet-nav-arrow {
transform: rotate(90deg);
}
}
}
.jet-nav-arrow {
margin-left: 0;
margin-right: 10px;
order: -1;
}
}
}
// Horizontal Menu Alignment
&--horizontal {
.jet-nav-align-space-between & {
> .menu-item {
flex-grow: 1;
}
}
.jet-nav-tablet-align-space-between & {
@media ( max-width: $md-max ) {
> .menu-item {
flex-grow: 1;
}
}
}
.jet-nav-tablet-align-center &,
.jet-nav-tablet-align-flex-start &,
.jet-nav-tablet-align-flex-end & {
@media ( max-width: $md-max ) {
> .menu-item {
flex-grow: 0;
}
}
}
.jet-nav-mobile-align-space-between & {
@media ( max-width: $sm-max ) {
> .menu-item {
flex-grow: 1;
}
}
}
.jet-nav-mobile-align-center &,
.jet-nav-mobile-align-flex-start &,
.jet-nav-mobile-align-flex-end & {
@media ( max-width: $sm-max ) {
> .menu-item {
flex-grow: 0;
}
}
}
}
// Vertical Menu Style
&.jet-nav--vertical {
flex-direction: column;
flex-wrap: nowrap;
.menu-item-link.menu-item-link-top {
justify-content: flex-start;
.jet-nav-arrow {
transform: rotate( -90deg );
}
}
}
&.jet-nav--vertical-sub-left-side {
.menu-item-link.menu-item-link-top,
.menu-item-link.menu-item-link-sub {
.jet-nav-arrow {
transform: rotate( 90deg );
}
}
.menu-item-link.menu-item-link-sub {
justify-content: flex-start;
}
.jet-nav-arrow {
margin-left: 0;
margin-right: 10px;
order: -1;
}
// Menu Alignment
.jet-nav-align-space-between & {
.menu-item-link-top .jet-nav-link-text {
margin-left: auto;
}
}
.jet-nav-tablet-align-space-between & {
@media ( max-width: $md-max ) {
.menu-item-link-top .jet-nav-link-text {
margin-left: auto;
}
}
}
.jet-nav-tablet-align-center &,
.jet-nav-tablet-align-flex-start &,
.jet-nav-tablet-align-flex-end & {
@media ( max-width: $md-max ) {
.menu-item-link-top .jet-nav-link-text {
margin-left: 0;
}
}
}
.jet-nav-mobile-align-space-between & {
@media ( max-width: $sm-max ) {
.menu-item-link-top .jet-nav-link-text {
margin-left: auto;
}
}
}
.jet-nav-mobile-align-center &,
.jet-nav-mobile-align-flex-start &,
.jet-nav-mobile-align-flex-end & {
@media ( max-width: $sm-max ) {
.menu-item-link-top .jet-nav-link-text {
margin-left: 0;
}
}
}
}
&.jet-nav--vertical-sub-bottom {
.menu-item-link.menu-item-link-top,
.menu-item-link.menu-item-link-sub {
.jet-nav-arrow {
transform: rotate(0);
@if $direction == rtl {
margin-left: 0;
margin-right: 10px;
order: -1;
}
}
}
}
// Mobile Menu
.jet-mobile-menu.jet-nav-wrap & {
@media ( max-width: $sm-max ) {
display: none;
flex-direction: column;
flex-wrap: nowrap;
margin-top: 10px;
.menu-item-link.menu-item-link-top {
justify-content: space-between;
}
.menu-item-link.menu-item-link-top,
.menu-item-link.menu-item-link-sub {
.jet-nav-arrow {
transform: rotate( 0deg );
@if $direction == rtl {
margin-left: 0;
margin-right: 10px;
order: -1;
}
}
}
&.jet-nav--vertical {}
&.jet-nav--vertical-sub-left-side {
.menu-item .menu-item-link.menu-item-link-top .jet-nav-link-text {
margin-left: 0;
}
.menu-item-link.menu-item-link-sub {
justify-content: space-between;
}
.jet-nav-arrow {
@if $direction == ltr {
margin-left: 10px;
margin-right: 0;
order: 1;
}
}
}
}
}
.jet-mobile-menu--full-width.jet-nav-wrap & {
@media ( max-width: $sm-max ) {
position: absolute;
z-index: 9999;
left: 0;
display: block;
width: 100vw;
transform: scaleY(0);
Loading ...