Merge pull request #1382 from Nishakulkarni06/styled_navbar

addded some styles in navbar for small screen sizes
apu52 · Dec 9, 2024 · 4c3c496 · 4c3c496
2 parents 3d5a087 + ebc170c
commit 4c3c496
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/style.css b/style.css
@@ -99,15 +99,24 @@
   transition: all 0.3s ease-in-out;
 }
 
-@media (max-width: 768px) {
-  /* .container {
+ @media (max-width: 768px) {
+    .container {
     flex-direction: column;
-    display: none;
-  }
-
+    background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(64, 64, 64, 0.5));
+    position: fixed;
+    top: 0;
+    left: 20%; /* Add margin from the left */
+    width: 80%; /* Adjust width to fit the remaining space */
+    height: 24rem;
+    z-index: 100;
+    padding: 1rem; 
+    }
+ }  
+
+/*
   .navbar.open .container {
     display: flex; /* Show the navbar when the menu is open */
-  }
+  /* } */
 
 
   /* .hamburger {
@@ -128,3 +137,4 @@
     transform: rotate(-45deg) translate(5px, -5px);
   }
 }
+