yeuchaybo/assets/scss/site-navigation/_responsive-menu.scss

/* ## Responsive Menu
--------------------------------------------- */

.menu {

	.menu-item:focus {
		position: static;
	}

	.menu-item > a:focus + ul.sub-menu,
	.menu-item.sfHover > ul.sub-menu {
		left: auto;
		opacity: 1;
	}
}

.genesis-responsive-menu {
	display: none;
	position: relative;

	@include breakpoint(sm) {
		display: block;
	}

	.genesis-nav-menu {

		.menu-item:hover > .sub-menu,
		.menu-item:focus > .sub-menu {
			display: none;
		}

		.sub-menu {
			display: none;
			clear: both;
			position: static;
			z-index: 99;
			left: -9999px;
			width: 100%;
			margin: 0;
			padding-left: 15px;
			opacity: 1;

			@include breakpoint(sm) {
				position: absolute;
				width: 180px;
				padding-left: 0;
				border-top: $border;
				opacity: 0;
				transition: opacity 0.4s ease-in-out;
			}
		}
	}
}

.menu-toggle {
	display: block;
	visibility: visible;
	position: relative;
	z-index: 1000;
	padding: 1.25em 0 1.25em 1.25em;
	border-width: 0;
	color: $menu-toggle--font-color;
	background-color: $menu-toggle--background-color;
	line-height: $line-height--smaller;
	text-align: center;

	@include breakpoint(sm) {
		display: none;
	}

	&:focus,
	&:hover {
		border-width: 0;
		color: $menu-toggle--font-color-hover;
		background-color: $menu-toggle--background-color;

		span,
		span:before,
		span:after {
			background-color: $link--font-color;
		}
	}

	span,
	span:before,
	span:after {
		display: block;
		position: absolute;
		width: 15px;
		height: 2px;
		background-color: $dark-grey;
		content: "";
		transition: background-color $transition;
	}

	span {
		top: 1px;
		bottom: 0;
		left: 0;
		margin: auto;

		&:before {
			top: -4px;
		}

		&:after {
			bottom: -4px;
		}
	}

	&.activated {

		span {
			background-color: transparent;

			&:before {
				top: 0;
				transform: rotate(45deg);
			}

			&:after {
				bottom: 0;
				transform: rotate(-45deg);
			}
		}
	}
}

.sub-menu-toggle {
	position: relative;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	background: $sub-menu-toggle--background-color;

	@include breakpoint(sm) {
		display: none;
	}

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

	&:before,
	&:after {
		display: block;
		position: absolute;
		width: 0.8rem;
		height: 2px;
		background-color: $dark-grey;
		content: "";
	}

	&:before {
		left: 1.2rem;
		transform: rotate(45deg);
	}

	&:after {
		right: 1.2rem;
		transform: rotate(-45deg);
	}

	&.activated {

		&:before {
			left: 1.2rem;
			transform: rotate(-45deg);
		}

		&:after {
			right: 1.2rem;
			transform: rotate(45deg);
		}

	}
}