baueradvance/httpdocs/files/theme/assets/scss/components/_header.scss

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	.inside {
		max-width: 1200px;
		margin: 0 auto;
		padding: 2rem 15px;
		background: $bg-color;
		height: 7rem;
		.node_wrapper {
			display: flex;
			justify-content: space-between;
			max-width: 1050px;
			margin: auto;
		}
		.logo {
			svg {
				max-width: 265px;
				@media (min-width: 576px) {
					max-width: 343px;
				}
			}
		}
		.mod_changelanguage {
			margin-right: 4rem;
			ul {
				margin: 0;
				padding: 0;
				li {
					list-style-type: none;
					display: inline-block;
					margin: 0 0.5rem;
					color: $main-color;
					a {
						color: #000;
						&:hover {
							text-decoration: none;
						}
					}
					&.active {
						position: relative;
						&:after {
							content: "";
							display: block;
							position: absolute;
							left: 0;
							bottom: 2px;
							width: 100%;
							height: 3px;
							background: $main-color;
						}
					}
				}
			}
		}
		.hamburg { 
		   display: block;
		   position: relative;
		   width: 27px;
		   height: 20px;
		   cursor: pointer;
		}
		
		.line { 
		   position: absolute; 
		   left:10px;
		   width: 27px; 
		   display: block; 
		   transition: 0.5s; 
		   transform-origin: center;
		   border: 2px solid $main-color;
		   border-radius: 8px;
		}
		
		.line:nth-child(1) { top: 0; }
		.line:nth-child(2) { top: 8px; }
		.line:nth-child(3) { top: 16px; }
		
		.hamburg.checked .line:nth-child(1){
		   transform: translateY(12px) rotate(-45deg);
		}
		
		.hamburg.checked .line:nth-child(2){
		   opacity:0;
		}
		
		.hamburg.checked .line:nth-child(3){
		   transform: translateY(-12px) rotate(45deg);
		}
	}
}

.nav-icon {
    cursor: pointer;
    width: 27px;
    height: 20px;
    margin-left: 1rem;
    div,
    &:before,
	&:after {
		background-color: $main-color;
	    content: '';
	    display: block;
	    height: 4px;
	    margin: 4px 0;
	    transition: all .2s ease-in-out;
		border-radius: 2px;
	}
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: $bg-color;
    overflow-y: auto;
    transition: 0.5s;
    @media (min-width: 992px) {
    	background-image: url(../img/menu_augen.svg);
    	background-repeat: no-repeat;
    }
    nav {
        ul {
            margin: 0;
            padding: 0;
            li {
            	list-style-type: none;
	            a, strong {
	            	display: block;
	            	@include futura-bold;
	                font-size: size(36);
	                text-align: right;
	                text-transform: uppercase;
	                line-height: size(48);
	                color: #000;
	            }
	            strong {
	            	color: #f1f1f1;
	            }
            }
        }
        &.mod_customnav {
        	margin-top: 6rem;
        	ul {
        		li {
        			a, strong {
        				font-size: size(14);
        				line-height: size(19);
        			}
        		}
        	}
        }
    }
}
body.nav-open {
    .overlay {
        height: 100%;
        nav {
            ul li {
            }
            ul.level_2 li {
                animation: none;
            }
        }
    }
    .nav-icon:before {
        transform: translateY(8px) rotate(135deg);
    }
    .nav-icon:after {
        transform: translateY(-8px) rotate(-135deg);
    }
    .nav-icon div {
        transform: scale(0);
    }
}
.overlay-content {
    position: relative;
    top: 100px;
    width: 100%;
    text-align: center;
    padding-top: 15px;
    max-width: 810px;
    margin: auto;
    padding-right: 25px;
    @media (min-width: 992px) {
    	padding-right: 0;
    }
}
.overlay a {
    text-decoration: none;
    font-size: size(18);
    font-weight: 400;
    color: #fff;
    display: block;
    transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}