Merge pull request #124 from Prince-kushwaha-2004/nevbar

Added responsiveness to navbar
Kritika30032002 · Feb 2, 2024 · a767cb4 · a767cb4
2 parents 37cc017 + 41c221c
commit a767cb4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/.env.example b/.env.example
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -93,6 +93,14 @@ body {
   .menu-toggle.show {
     display: block;
   }
+  #toogleicon{
+    position: absolute;
+    right: 20px;
+  }
+  .navbar-logo{
+    position: absolute;
+    left: 20px;
+  }
 }
 .navbar-nav li a::before {
   content: "";
@@ -129,7 +137,6 @@ body {
   background-repeat: no-repeat;
   color: #555;
 }
-
 .compose {
   margin: 20px;
   padding: 15px;
@@ -297,13 +304,40 @@ body.dark-mode .moon-icon {
   #toogleicon {
     display: block;
   }
-}
+  .menu {
+    display: none;
 
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100%;
+    background-color: rgba(70, 69, 69, 0.95);
+    z-index: 1;
+  }
+  .menu.show {
+    display: flex;
+    margin-top: 50px;
+    border-radius: 3px;
+  }
+  .menu li a {
+    text-align: center;
+  }
+  .menu-toggle {
+    display: block;
+    text-align: center;
+  }
+  .navbar-brand {
+    text-align: center;
+  }
+  .menu-toggle.show {
+    display: block;
+  }
+}
 .contact {
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .contact.dark-mode {
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.36);
-}
+}