header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 99; .inside { width: 100%; margin: 0 auto; padding: 2rem 15px; background: #fff; 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: $newClassic; overflow-y: auto; transition: 0.5s; 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: #fff; } strong { color: $bg-color; } } } &.mod_customnav { margin-top: 5rem; 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: 35px; 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: $bg-color; }