22

✏️ Editing: _jet-nav-menu.scss

.jet-nav {
	display: flex;
	flex-wrap: wrap;

.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;
			}

.jet-nav-link-text {
				display: block;
			}
		}

.jet-nav-arrow {
			display: flex;
			justify-content: center;
			align-items: center;

svg {
				fill: currentColor;
				height: auto;
				width: 10px;
				cursor: pointer;
			}
		}
	}
	&-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-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-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%;
				}
			}
		}

.menu-item-link-sub {
			.jet-nav-link-text {
				display: block;
				width: 100%;
				.rtl & {
					text-align: right;
				}
			}
		}
	}

@include jet-nav_breakpoints {
		.jet-mobile-menu.jet-nav-wrap & {
			.jet-nav__sub {
				position: static;
				top: 0;
				left: 0;
				width: 100% !important;
				transform: translateY(0);

display: none;
			}
		}

.menu-item.jet-nav-hover > {

.jet-nav__sub {
				display: block;
			}
		}
	}

// Horizontal Menu ( RTL )
	&--horizontal {
		@if $direction == rtl {

.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;
			}

.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_extra-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX ) {
				> .menu-item {
					flex-grow: 1;
				}
			}
		}

.jet-nav-tablet-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_MAX ) {
				> .menu-item {
					flex-grow: 1;
				}
			}
		}

.jet-nav-tablet_extra-align-center &,
		.jet-nav-tablet_extra-align-flex-start &,
		.jet-nav-tablet_extra-align-flex-end & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX ) {
				> .menu-item {
					flex-grow: 0;
				}
			}
		}

.jet-nav-tablet-align-center &,
		.jet-nav-tablet-align-flex-start &,
		.jet-nav-tablet-align-flex-end & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_MAX ) {
				> .menu-item {
					flex-grow: 0;
				}
			}
		}

.jet-nav-mobile_extra-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX ) {
				> .menu-item {
					flex-grow: 1;
				}
			}
		}

.jet-nav-mobile_extra-align-center &,
		.jet-nav-mobile_extra-align-flex-start &,
		.jet-nav-mobile_extra-align-flex-end & {
			@media ( max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX ) {
				> .menu-item {
					flex-grow: 0;
				}
			}
		}

.jet-nav-mobile-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_MOBILE_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: ELEMENTOR_SCREEN_MOBILE_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;
		}

@if $direction == rtl {
			.jet-nav-arrow {
				margin-left: auto;
				margin-right: 10px;
			}
		}
	}

&.jet-nav--vertical-sub-left-side {

.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_extra-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: auto;
				}
			}
		}

.jet-nav-tablet-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_TABLET_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: ELEMENTOR_SCREEN_TABLET_MAX ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: 0;
				}
			}
		}

.jet-nav-mobile_extra-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX ) {
				.menu-item-link-top .jet-nav-link-text {
					margin-left: auto;
				}
			}
		}

.jet-nav-mobile-align-space-between & {
			@media ( max-width: ELEMENTOR_SCREEN_MOBILE_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: ELEMENTOR_SCREEN_MOBILE_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 {

@if $direction == rtl {
					margin-left: 0;
					margin-right: 10px;
					order: 1;
				}
			}
		}
	}

// Mobile Menu
	.jet-mobile-menu.jet-nav-wrap & {
		@include jet-nav_breakpoints {
			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 {

@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 & {
		@include jet-nav_breakpoints {
			position: absolute;
			z-index: 9999;
			left: 0;
			display: block;
			width: 100vw;
			transform: scaleY(0);
			transform-origin: top center;
			transition: transform .2s cubic-bezier(.35,.19,.45,.91);
			will-change: transform;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: -ms-autohiding-scrollbar;

background-color: #fff;
		}
	}

.jet-mobile-menu--full-width.jet-mobile-menu-active & {
		@include jet-nav_breakpoints {
			transform: scaleY(1);
		}
	}

.jet-mobile-menu--left-side.jet-nav-wrap &,
	.jet-mobile-menu--right-side.jet-nav-wrap & {
		@include jet-nav_breakpoints {
			position: fixed;
			top: 0;
			z-index: 9999;
			display: block;
			width: 270px;
			max-width: 100%;
			height: 100vh;
			padding: 10px 5px;
			margin-top: 0;
			transition: transform .2s cubic-bezier(.35,.19,.45,.91);
			transform: translateX(-100%);
			will-change: transform;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: -ms-autohiding-scrollbar;

background-color: #fff;

.admin-bar & {
				&:before {
					content: '';
					display: block;
					height: 46px;
				}
			}
		}
	}

.jet-mobile-menu--left-side.jet-nav-wrap & {
		@include jet-nav_breakpoints {
			left: 0;
			transform: translateX(-100%);
		}
	}

.jet-mobile-menu--right-side.jet-nav-wrap & {
		@include jet-nav_breakpoints {
			right: 0;
			transform: translateX(100%);
		}
	}

.jet-mobile-menu--left-side.jet-mobile-menu-active &,
	.jet-mobile-menu--right-side.jet-mobile-menu-active & {
		@include jet-nav_breakpoints {
			transform: translateX(0);
		}
	}

&__mobile-close-btn{
		display: none;
	}

@include jet-nav_breakpoints {
		.jet-nav__mobile-close-btn {
			.jet-mobile-menu--left-side.jet-nav-wrap &,
			.jet-mobile-menu--right-side.jet-nav-wrap & {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9999;
				padding: 10px;
				line-height: 1;
				cursor: pointer;

.admin-bar & {
					top: 46px;
				}
			}
		}
	}
}

.jet-nav-wrap {
	max-width: 100%;

.jet-nav__mobile-trigger {
		display: none;
		height: 40px;
		width: 40px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		box-sizing: border-box;
		&-open {
			display: block;
		}
		&-close {
			display: none;
		}
		&.jet-nav-mobile-trigger-align-left {
			margin-right: auto;
			margin-left: 0;
		}
		&.jet-nav-mobile-trigger-align-right {
			margin-right: 0;
			margin-left: auto;
		}
		&.jet-nav-mobile-trigger-align-center {
			margin-right: auto;
			margin-left: auto;
		}
	}
	&.jet-mobile-menu-active {
		.jet-nav__mobile-trigger {
			&-open {
				display: none;
			}
			&-close {
				display: block;
			}
		}
		.jet-nav {
			@include jet-nav_breakpoints {
				display: block;
			}
		}
	}

@include jet-nav_breakpoints {
		&.jet-mobile-menu--left-side,
		&.jet-mobile-menu--right-side {
			.jet-nav__mobile-close-btn {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9999;
				padding: 10px;
				line-height: 1;
				cursor: pointer;

.admin-bar & {
					top: 46px;
				}
			}
		}
	}

@include jet-nav_breakpoints {
		.jet-nav__mobile-trigger {
			display: flex;
		}
	}
}

MR SKB