themes-wordpress/modern-business/sass/navigation/_menu-main-navigation.scss

/** === Main menu === */

.main-navigation {
	display: block;
	font-size: $font__size-sm;
	margin-top: #{0.6 * $size__spacing-unit};
	order: 3;

	body.page & {
		display: block;
	}

	> div {
		display: inline;
	}

	/* Un-style buttons */
	button {
		display: inline-block;
		border: none;
		padding: 0;
		margin: 0;
		font-family: $font__heading;
		font-weight: 700;
		line-height: $font__line-height-heading;
		text-decoration: none;
		background: transparent;
		color: inherit;
		cursor: pointer;
		transition: background 250ms ease-in-out,
		            transform 150ms ease;
		-webkit-appearance: none;
		-moz-appearance: none;

		&:hover,
		&:focus {
			background: transparent;
		}

		&:focus {
			outline: 1px solid transparent;
			outline-offset: -4px;
		}

		&:active {
			transform: scale(0.99);
		}
	}

	.main-menu {

		display: inline-block;
		margin: 0;
		padding: 0;

		> li {

			color: $color__link;
			display: inline;
			position: relative;

			> a {

				font-weight: 700;
				color: $color__link;
				margin-right: #{0.5 * $size__spacing-unit};

				+ svg {
					margin-right: #{0.5 * $size__spacing-unit};
				}

				&:hover,
				&:hover + svg {
					color: $color__link-hover;
				}
			}

			&.menu-item-has-children {

				display: inline-block;
				position: inherit;

				@include media(tablet) {
					position: relative;
				}

				> a {
					margin-right: #{0.125 * $size__spacing-unit};
				}

				& > a,
				.menu-item-has-children > a {

					&:after {
						content: "";
						display: none;
					}
				}

				.submenu-expand {

					display: inline-block;
					margin-right: #{0.25 * $size__spacing-unit};

					/* Priority+ Menu */
					&.main-menu-more-toggle {

						position: relative;
						height: 24px;
						line-height: $font__line-height-heading;
						width: 24px;
						padding: 0;
						margin-left: #{0.5 * $size__spacing-unit};

						svg {
							height: 24px;
							width: 24px;
							top: #{-0.125 * $size__spacing-unit};
							vertical-align: text-bottom;
						}
					}

					.wp-customizer-unloading &,
					&.is-empty {
						display: none;
					}

					svg {
						position: relative;
						top: 0.2rem;
					}
				}
			}

			&:last-child > a,
			&:last-child.menu-item-has-children .submenu-expand {
				margin-right: 0;
			}
		}
	}

	.default-menu {
		> li {
			> a {
				margin-right: #{1 * $size__spacing-unit};
			}

			&.menu-item-has-children {
				> a {
					margin-right: #{1 * $size__spacing-unit};
				}
			}

			&:last-child > a,
			&:last-child.menu-item-has-children .submenu-expand {
				margin-right: 0;
			}
		}
	}

	.sub-menu {

		background-color: $color__link;
		color: $color__background-body;
		list-style: none;
		padding-left: 0;

		position: absolute;
		opacity: 0;
		left: -9999px;
		z-index: 99999;

		@include media(tablet) {
			width: auto;
			min-width: -moz-max-content;
			min-width: -webkit-max-content;
			min-width: max-content;
		}

		> li {
			display: block;
			float: none;
			position: relative;
			text-align: left;

			&.menu-item-has-children {

				.submenu-expand {
					display: inline-block;
					position: absolute;
					width: calc( 24px + #{$size__spacing-unit} );
					right: 0;
					top: calc( .125 * #{$size__spacing-unit} );
					bottom: 0;
					color: white;
					line-height: 1;
					padding: calc( .5 * #{$size__spacing-unit} );

					svg {
						top: 0;
					}
				}

				.submenu-expand {
					margin-right: 0;
				}

				@include media(tablet) {

					.menu-item-has-children > a {

						&:after {
							content: "\203a";
						}
					}
				}
			}

			> a,
			> .menu-item-link-return {

				color: $color__background-body;
				display: block;
				line-height: $font__line-height-heading;
				text-shadow: none;
				padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
				white-space: nowrap;

				&:hover,
				&:focus {
					background: $color__link-hover;

					&:after {
						background: $color__link-hover;
					}
				}
			}

			> .menu-item-link-return {
				width: 100%;
				font-size: $font__size_base;
				font-weight: normal;
				text-align: left;
			}

			> a:empty {
				display: none;
			}

			&.mobile-parent-nav-menu-item {

				display: none;
				font-size: $font__size-sm;
				font-weight: normal;

				svg {
					position: relative;
					top: 0.2rem;
					margin-right: calc( .25 * #{$size__spacing-unit} );
				}
			}
		}
	}

	/*
	 * Sub-menu styles
	 *
	 * :focus-within needs its own selector so other similar
	 * selectors don’t get ignored if a browser doesn’t recognize it
	 */
	.main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {

		display: block;
		left: 0;
		margin-top: 0;
		opacity: 1;
		width: auto;
		min-width: 100%;


		/* Non-mobile position */
		@include media(tablet) {
			display: block;
			margin-top: 0;
			opacity: 1;
			position: absolute;
			left: 0;
			right: auto;
			top: auto;
			bottom: auto;
			height: auto;
			min-width: -moz-max-content;
			min-width: -webkit-max-content;
			min-width: max-content;
			transform: none;
		}

		&.hidden-links {
			left: 0;
			width: 100%;
			display: table;
			position: absolute;

			@include media(tablet) {
				right: 0;
				left: auto;
				display: block;
				width: max-content;
			}
		}

		.submenu-expand {
			display: none;
		}

		.sub-menu {
			display: block;
			margin-top: inherit;
			position: relative;
			width: 100%;
			left: 0;
			opacity: 1;

			/* Non-mobile position */
			@include media(tablet) {
				float: none;
				max-width: 100%;
			}
		}

		/* Nested sub-menu dashes */
		.sub-menu {
			counter-reset: submenu;
		}

		.sub-menu > li > a::before {
			font-family: $font__body;
			font-weight: normal;
			content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
			counter-increment: submenu
		}
	}

	.main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
	.main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
	.main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {

		display: block;
		left: 0;
		margin-top: 0;
		opacity: 1;
		width: auto;
		min-width: 100%;


		/* Non-mobile position */
		@include media(tablet) {
			display: block;
			float: none;
			margin-top: 0;
			opacity: 1;
			position: absolute;
			left: 0;
			right: auto;
			top: auto;
			bottom: auto;
			height: auto;
			min-width: -moz-max-content;
			min-width: -webkit-max-content;
			min-width: max-content;
			transform: none;
		}

		&.hidden-links {
			left: 0;
			width: 100%;
			display: table;
			position: absolute;

			@include media(tablet) {
				right: 0;
				left: auto;
				display: table;
				width: max-content;
			}
		}

		.submenu-expand {
			display: none;
		}

		.sub-menu {
			display: block;
			margin-top: inherit;
			position: relative;
			width: 100%;
			left: 0;
			opacity: 1;

			/* Non-mobile position */
			@include media(tablet) {
				float: none;
				max-width: 100%;
			}
		}

		/* Nested sub-menu dashes */
		.sub-menu {
			counter-reset: submenu;
		}

		.sub-menu > li > a::before {
			font-family: $font__body;
			font-weight: normal;
			content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
			counter-increment: submenu
		}
	}

	/**
	 * Fade-in animation for top-level submenus
	 */
	.main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
		animation: fade_in 0.1s forwards;
	}

	/**
	 * Off-canvas touch device styles
	 */
	.main-menu .menu-item-has-children.off-canvas .sub-menu {

		.submenu-expand .svg-icon {
			transform: rotate(270deg);
		}

		.sub-menu {
			opacity: 0;
			position: absolute;
			z-index: 0;
			transform: translateX(-100%);
		}

		li:hover,
		li:focus,
		li > a:hover,
		li > a:focus {
			background-color: transparent;
		}

		> li > a,
		> li > .menu-item-link-return {
			white-space: inherit;
		}

		&.expanded-true {

			display: table;
			margin-top: 0;
			opacity: 1;
			padding-left: 0;

			/* Mobile position */
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			position: fixed;
			z-index: 100000; /* Make sure appears above mobile admin bar */
			width: 100vw;
			height:  100vh;
			max-width: 100vw;
			transform: translateX(+100%);
			animation: slide_in_right 0.3s forwards;

			> .mobile-parent-nav-menu-item {
				display: block;
			}

			/* Prevent menu from being blocked by admin bar */
			.admin-bar & {
				top: 46px;
				height: calc( 100vh - 46px );

				.sub-menu.expanded-true {
					top: 0;
				}

				/* WP core breakpoint */
				@media only screen and ( min-width: 782px ) {
					top: 32px;
					height: calc( 100vh - 32px );

					.sub-menu.expanded-true {
						top: 0;
					}
				}
			}
		}
	}

	// Hide duplicate menu-more-link when re-loading a menu in the customizer
	.main-menu-more {
		&:nth-child(n+3) {
			display: none;
		}
	}

}

/* Menu animation */

@keyframes slide_in_right {
	100% {
		transform: translateX(0%);
	}
}

@keyframes fade_in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}