.midnightHeader{ margin-top: 0px; } .midnightHeader.default a{ color: white; } .midnightHeader.white a{ color: black; } .midnightHeader.black a{ color: white; } #header{ .language-selector{ display: flex; position: fixed; width: 160px; left: 50%; margin-top: 10px; margin-left: -75px; li{ display: flex; &:nth-child(-n+2){ &::after{ margin: 0 10px; display: block; position: relative; } } } } .navigation{ li{ z-index: 999; position: fixed; text-align: center; &:first-child{ display: none; } &:nth-child(2){ // margin-bottom: 10px; top: auto!important; right: auto!important; bottom: 10px!important; left: auto!important; width: 50%; } &:nth-child(3){ // margin-top: 10px; top: 10px!important; bottom: auto!important; right: auto!important; left: auto!important; width: 50%; } &:nth-child(4){ // margin-bottom: 10px; bottom: 10px!important; top: auto!important; right: 0!important; left: auto!important; width: 50%; } &:nth-child(5){ transform: rotate(90deg); top: 50%!important; width: 100%; right: -48.6%!important; left: auto!important; bottom: auto!important; // margin-right: 22px; } &:nth-child(6){ transform: rotate(-90deg); top: 50%!important; width: 100%; left: -48.6%!important; right: auto!important; bottom: auto!important; // margin-left: 22px; } &:nth-child(7){ // margin-top: 10px; top: 10px!important; right: 0!important; bottom: auto!important; left: auto!important; width: 50%; } a{ position: relative; margin: auto; &:hover:before{ visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } &:before{ content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: white; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } } } .active{ a:before{ visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } } }