#header{ position: fixed; top: 0; left: 0; z-index: 999; .navbar{ .language-selector{ z-index: 999; position: fixed; left: 50%; top: 0; width: 300px; margin-left: -150px; margin-top: 10px; text-align: center; &>li{ display:inline-block; } } .navigation{ &>li{ width: 50%; position: fixed; &:nth-of-type(1){ display: none; } &:nth-of-type(2){ bottom: 0; left: 0; margin-bottom: 15px; padding-left: 50px; text-align: center; } &:nth-of-type(3){ bottom: 0px; right: 0; margin-bottom: 15px; padding-right: 50px; text-align: center; } &:nth-of-type(4){ top: 0px; left: 0; padding-left: 50px; margin-top: 15px; text-align: center; } &:nth-of-type(5){ top: 50%; right: -25%; margin-right: 23px; text-align: center; -webkit-transform: rotate(90deg); transform: rotate(90deg); } &:nth-of-type(6){ top: 50%; left: -25%; margin-left: 23px; text-align: center; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } &:nth-of-type(7){ top: 0; margin-top: 15px; right: 0; -webkit-transform-origin: center; transform-origin: center; text-align: center; } } } .nav_media_q{ display: none; } } } a{ position: relative; } a::before { content: " "; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #4f100B; 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; } a:hover::before, a.active::before{ visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }