themes-wordpress/seedlet/assets/sass/components/header/_primary-navigation.scss

// Navigation

// Mobile menu toggles
.menu-button-container {
	display: none;
	justify-content: space-between;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	#primary-open-menu {
		margin-left: auto;
	}

	@include media(mobile-only){
		display: flex;
	}

	.admin-bar:not(.primary-navigation-open) & {
		top: 46px;
	}
}

.menu-button-container,
.primary-navigation,
.woo-navigation {
	.button {
		background-color: transparent;
		color: var(--primary-nav--color-link);
		z-index: 500;
		&.open {
			display: flex;
			z-index: 499;
		}
		&.close {
			display: none;
		}

		&:hover {
			color: var(--primary-nav--color-link-hover);
		}

		&#woo-open-menu {
			.svg-icon {
				margin-left: 0;
				margin-right: calc(0.25 * var(--global--spacing-unit));
				vertical-align: middle;
			}
		}

		.dropdown-icon {
			display: flex;
			align-items: center;

			.svg-icon {
				margin-left: calc(0.25 * var(--global--spacing-unit));
			}


			// Menu icon is off-center vertically to prevent blurry pixels.
			&.open .svg-icon {
				position: relative;
				top: -1px;
			}
		}

		.hide-visually {
			position: absolute !important;
			clip: rect(1px, 1px, 1px, 1px);
			padding:0 !important;
			border:0 !important;
			height: 1px !important;
			width: 1px !important;
			overflow: hidden;
		}
	}

	.primary-navigation-open & {
		#primary-open-menu {
			display: none;
		}
		#primary-close-menu {
			display: flex;
		}
	}
	.woo-navigation-open & {
		#woo-open-menu {
			display: none;
		}
		#woo-close-menu {
			display: flex;
		}
	}
}

.primary-navigation,
.woo-navigation { 
	position: absolute;
 	top: 0;
 	right: 0;
	color: var(--primary-nav--color-text);
	font-size: var(--primary-nav--font-size);
	margin-top: 0;
	margin-bottom: 0;

	@include media(mobile-only) {
		width: 100%;
	}

	// Mobile menu closed
	& > div {
		visibility: hidden;
		opacity: 0;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
		background-color: var(--global--color-background);
		overflow-x: hidden;
		overflow-y: scroll;
		transition: all .15s ease-in-out;
		transform: translateY(var(--global--spacing-vertical));

		@include media(mobile-only) {
			z-index: 499;
		}
	}


	// Mobile menu open
	.primary-navigation-open & {

		> .primary-menu-container {
			visibility: visible;
			opacity: 1;
			transform: translateY(0);
		}

	}

	// Adjust button postion when scrolling is locked
	.lock-scrolling & > .button {
		position: fixed;
		top: 0;
		right: 0;
	}

	// Adjust positions when logged-in
	.admin-bar &,
	.admin-bar & > div,
	.admin-bar.lock-scrolling & > .button {
		top: 46px;
	}

	@include media(mobile) {
		position: relative;
		display: flex;
		justify-content: var(--primary-nav--justify-content);
		margin-top: calc( var(--global--spacing-vertical) * 1.5 );

		// Mobile menu on desktop
		& > div {
			visibility: visible;
			opacity: 1;
			position: relative;
			padding: 0;
			background-color: transparent;
			overflow: initial;
			transform: none;
		}

		// Hide mobile menu toggle
		#toggle-menu {
			display: none;
		}

		// Hide sub-sub-menus
		& > div > ul > li > ul {
			display: none;
		}

		// Don't adjust position when logged-in
		.admin-bar & {
			top: initial;

			& > div {
				top: initial;
			}
		}
	}

	// Menu list wrapper
	& > div > ul {
		display: flex;
		justify-content: var(--primary-nav--justify-content);
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		max-width: none;
		padding-left: 0;
		position: relative;

		ul {
			padding-left: 0;
		}

		li {
			display: block;
			position: relative;
			width: 100%;
			z-index: 1;

			&:hover,
			&:focus-within {
				cursor: pointer;
				z-index: 99999;
			}

			@include media(mobile) {
				display: inherit;
				width: inherit;

				/* Submenu display */
				&:hover > ul,
				&:focus-within > ul,
				& ul:hover,
				& ul:focus {
					visibility: visible;
					opacity: 1;
					display: block;
				}
			}
		}

		& > li {

			@include media(mobile) {
				& > a {
					@include crop-text(var(--global--line-height-base));
				}
			}
		}

		/* Sub-menus Flyout */
		& > li > .sub-menu {

			position: relative;

			@include media(mobile) {
				margin: 0;
				background: var(--global--color-background);
				box-shadow: var(--global--elevation);
				left: 0;
				top: 100%;
				min-width: max-content;
				opacity: 0;
				position: absolute;
				transition: all 0.5s ease;
				visibility: hidden;
			}

			.sub-menu {
				width: 100%;
			}
		}
	}

	// Top-level Item Link Colors
	.primary-menu > .menu-item:hover > a {
		color: var(--primary-nav--color-link-hover);
	}

	// Menu Item Link Colors
	.menu-item > a {
		color: var(--primary-nav--color-link);

		&:hover,
		&:focus {
			color: var(--primary-nav--color-link-hover);
		}

		&:active {
			color: var(--primary-nav--color-link);
		}
	}

	// Menu Item
	a {
		color: currentColor;
		display: block;
		font-family: var(--primary-nav--font-family-mobile);
		font-size: var(--primary-nav--font-size-mobile);
		font-weight: var(--primary-nav--font-weight);
		padding: calc(0.5 * var(--primary-nav--padding)) 0;

		@include media(mobile) {
			font-family: var(--primary-nav--font-family);
			font-size: var(--primary-nav--font-size);
			font-weight: var(--primary-nav--font-weight);
			padding: var(--primary-nav--padding);
		}

		& + svg {
			fill: currentColor;
		}

		&:hover,
		&:link,
		&:visited {
			color: currentColor;
		}
	}

	// Sub-menu depth indicators + text styles
	.sub-menu {

		list-style: none;
		margin-left: var(--primary-nav--padding);

		.menu-item a {

			font-size: var(--primary-nav--font-size-sub-menu-mobile);
			font-style: var(--primary-nav--font-style-sub-menu-mobile);
			padding-top: calc(0.5 * var(--primary-nav--padding));
			padding-bottom: calc(0.5 * var(--primary-nav--padding));

			@include media(mobile) {
				font-size: var(--primary-nav--font-size);
				font-style: var(--primary-nav--font-style);
			}
		}
	}

	// Show top-level sub-menu indicators above mobile-breakpoint-only
	.menu-item-has-children {

		> .svg-icon {
 			display: none;
 		}

		@include media(mobile) {
			> a {
				padding-right: 0;
			}

			> .svg-icon {
				display: inline-block;
				height: 100%;
				margin-right: var(--primary-nav--padding);
			}
		}
	}

	.hide-visually {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		padding:0 !important;
		border:0 !important;
		height: 1px !important;
		width: 1px !important;
		overflow: hidden;
	}
}

// Keep the menu pinned to the top when the menu is open.
@include media(mobile-only) {
	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
	}
}