midnight

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

@@ -1,6 +1,19 @@
+.midnightHeader{
+  margin-top: 0px;
+}
+.midnightHeader.default a{
+  color: white;
+}
+
+.midnightHeader.white a{
+  color: black;
+}
+
+.midnightHeader.black a{
+  color: white;
+}
+
 #header{
-  position: fixed;
-  z-index: 999;
   .language-selector{
       display: flex;
       position: fixed;
@@ -22,50 +35,92 @@
 
   .navigation{
     li{
+      z-index: 999;
       position: fixed;
       text-align: center;
       &:first-child{
         display: none;
       }
       &:nth-child(2){
-        margin-bottom: 10px;
-        bottom: 0;
+        // margin-bottom: 10px;
+        top: auto!important;
+        right: auto!important;
+        bottom: 10px!important;
+        left: auto!important;
         width: 50%;
       }
       &:nth-child(3){
-        margin-top: 10px;
-        top: 0;
+        // margin-top: 10px;
+        top: 10px!important;
+        bottom: auto!important;
+        right: auto!important;
+        left: auto!important;
         width: 50%;
       }
       &:nth-child(4){
-        margin-bottom: 10px;
-        bottom: 0;
+        // margin-bottom: 10px;
+        bottom: 10px!important;
+        top: auto!important;
+        right: 0!important;
+        left: auto!important;
         width: 50%;
-        right: 0;
       }
       &:nth-child(5){
         transform: rotate(90deg);
-        top: 50%;
+        top: 50%!important;
         width: 100%;
-        right: -50%;
-        margin-right: 22px;
+        right: -48.6%!important;
+        left: auto!important;
+        bottom: auto!important;
+        // margin-right: 22px;
       }
       &:nth-child(6){
         transform: rotate(-90deg);
-        top: 50%;
+        top: 50%!important;
         width: 100%;
-        left: -50%;
-        margin-left: 22px;
+        left: -48.6%!important;
+        right: auto!important;
+        bottom: auto!important;
+        // margin-left: 22px;
       }
       &:nth-child(7){
-        margin-top: 10px;
-        top: 0;
-        right: 0;
+        // 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);
       }
     }
   }