responsiveness menu with username

elixir-europe · Jan 3, 2024 · c96cf95 · c96cf95
1 parent 3afc6c8
commit c96cf95
Show file tree

Hide file tree

Showing 3 changed files with 247 additions and 184 deletions.
diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css
@@ -1,9 +1,15 @@
-@media (min-width: 1350px) {
+@media (min-width: 1410px) {
   /* … */
   .nav4 {
     display: none;
   }
 
+  .userNameSmallScreen{
+    display: none;
+  }
+  .userName {
+    display: none;
+  }
   .menuNav {
     display: none;
   }
@@ -218,8 +224,6 @@
     margin-right: 50px;
   }
 
-
-
   .Sign-in3:hover {
     width: 96px;
     border-radius: 2px;
@@ -325,15 +329,44 @@
   }
 }
 
-@media (max-width: 1349px) {
+@media (max-width: 1409px) {
   .menuNav2 {
     display: none;
   }
 
+  .userNameSmallScreen{
+    display: none;
+  }
   .About {
     text-decoration: none;
   }
 
+  .nav4Container {
+    display: flex;
+    width: 180px;
+    z-index: 1;
+  }
+
+  .userNameOpenMenu {
+    margin: 0px;
+    font-size: 10px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgb(138 160 232);
+  }
+
+  .userName {
+    color: rgb(138 160 232);
+    font-size: 11px;
+    /* margin-bottom: 4px; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+  }
+
   .Sign-in3 {
     display: flex;
     justify-content: center;
@@ -432,7 +465,7 @@
 
   .menuNav {
     background-color: #235c94;
-    height: 140px;
+    height: 180px;
     width: 145px;
     margin-top: 22px;
     border-radius: 9px;
@@ -604,13 +637,28 @@
   }
 }
 
-@media (max-width: 860px) {
+@media (max-width: 1030px) {
   .ls-login-image2 {
     width: 17px;
     margin-right: -11px;
     margin-top: 21px !important;
   }
 
+  .userNameSmallScreen{
+    display: flex;
+    font-size: 11px;
+    width: 100%;
+    margin-top: 2px;
+    color: rgb(138 160 232);
+    justify-content: center;
+  }
+  .userName{
+    display: none;
+  }
+  .nav4Container {
+    display: flex;
+    z-index: 1;
+  }
   .Sign-in4 {
     display: flex;
     align-items: center;
@@ -790,7 +838,7 @@
 
   .nav4 {
     height: 32vh;
-    /* width: 83%; */
+    width: 83%;
     display: flex;
     /* flex-direction: column; */
     align-content: center;
@@ -821,7 +869,7 @@
 
   .menuNav2 {
     background-color: #235c94;
-    height: 269px;
+    height: 290px;
     width: 161px;
     margin-top: 22px;
     border-radius: 9px;