anissah/user/themes/anissabensalah/scss/theme/header.scss

.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);
      }
    }
  }
}