biobulkbende.org/app/assets/scss/modules/_site-header.scss

.site-header{
	position: absolute;
	width: 100%;
	z-index: 2;
	transition: background-color .3s ease-out;

	&--is-expanded {
		background-color: orange;
		padding-bottom: 18px;
	}
	
	@include atMedium(){
		position: fixed;
		background-color: rgba(#000, 0.4);
	}

	&__btn-container{
		@include atMedium(){
			padding: 32px 0px 32px 0px;
			float: right;
		}
	}

	&__menu-icon{
		width: 20px;
		height: 19px;
		position: absolute;
		z-index: 10;
		top: 10px;
		right: 10px;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 3px;
			background: #FFF;
			transform-origin: 0 0;
			transition: transform .3s ease-out;
		}

		&__middle {
			position: absolute;
			top: 8px;
			left: 0;
			width: 20px;
			height: 3px;
			background: #FFF;
			transition: all .3s ease-out;
			transform-origin: 0 50%;
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 20px;
			height: 3px;
			background: #FFF;
			transform-origin: 0 100%;
			transition: transform .3s ease-out;
		}

		@include atMedium {
			display: none;
		}
	}

	&__menu-icon--close-x {
		&::before {
			transform: rotate(45deg) scaleX(1.25);
		}

		.site-header__menu-icon__middle{
			transform: scaleX(0);
			opacity: 0;
		}

		&::after {
			transform: rotate(-45deg) scaleX(1.25) translateY(1px);

		}
	}




	&__menu-content{
		opacity: 0;
		transform: scale(1.2);
		transtion: all .3s ease-out;
		position: relative;
		z-index: -10;
		padding-top: 90px;
		text-align: center;

		&--is-visible{
			transform: scale(1);
			opacity: 1;
			z-index: 1;
		}

		@include atMedium(){
			opacity: 1;
			z-index: 1;
			padding-top: 0;
			transform: scale(1); 
		}
	}

	&__logo{
		position: absolute;
		top: 0px;
		padding: 5px 15px;
		left: 50%;
		transform-origin: 50% 0%;
		transform: translateX(-50%) scale(.8);
		transition: transform .3s ease-out;
		background-color: rgba(black, 0.5);

		&--orange-bg {
			background-color: orange;
		}

		@include atMedium(){
			padding: 0;
			top: 3px;
			position: relative;
			float: left;
			left: auto;
			transform: translateX(0);
			background-color: rgba(black, 0);
		}
	}

}