Fixed navbar elements in mobile devices (#609)

Rakesh9100 · Feb 23, 2024 · 26f1a1e · 26f1a1e
1 parent 4a3b8af
commit 26f1a1e
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/style.css b/style.css
@@ -1569,16 +1569,18 @@ section {
 @media only screen and (max-width: 768px) {
     .nav-menu {
         position: fixed;
-        height: 100%;
+        height: 100vh;
         left: -100%;
-        top: 5rem;
+        top: 0rem;
         flex-direction: column;
-        background-color: black;
+        background-color: rgba(26, 9, 46, 0.9);
         width: 100%;
         border-radius: 10px;
         text-align: center;
+        padding: auto;
         transition: 0.3s;
         box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
+        transition: 0.5s ease-in-out;
     }
 
     .herocontainer {
@@ -1602,10 +1604,13 @@ section {
 
     .nav-menu.active {
         left: 0;
+        height:100vh;
+        backdrop-filter: blur(7px);
+        transition: 0.5s ease-in-out;
     }
 
     .nav-item {
-        margin: 2.5rem 0;
+        margin: 3.5rem 0;
         font-size: 20px;
     }