updating on a navbar and footer

GauravPant47 · Jan 21, 2024 · a7cc2e3 · a7cc2e3
1 parent c5c55de
commit a7cc2e3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/navbar and footer/index.html b/navbar and footer/index.html
@@ -4,6 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
     <link rel="stylesheet" href="styles.css">
     <title>Responsive Navbar and Footer</title>
 </head>

diff --git a/navbar and footer/styles.css b/navbar and footer/styles.css
@@ -40,13 +40,27 @@
     display: none;
     flex-direction: column;
     cursor: pointer;
+
 }
 
 .menu-toggle span {
     height: 3px;
     width: 25px;
     background-color: white;
     margin: 3px 0;
+    transition: transform 0.3s ease-in-out;
+}
+
+.menu-toggle.active span:nth-child(1) {
+    transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.menu-toggle.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.menu-toggle.active span:nth-child(3) {
+    transform: rotate(45deg) translate(-5px, -6px);
 }
 
 /* Footer styles */
@@ -59,17 +73,32 @@ footer {
 
 /* Responsive design */
 @media (max-width: 768px) {
+    .logo {
+        font-size: 20px;
+    }
+
     .nav-links {
         display: none;
         flex-direction: column;
         background-color: #333;
-        width: 100%;
+        padding: 0px 0px 17px 40px;
+        width: 22%;
         position: absolute;
-        top: 70px;
-        left: 0;
+        top: 65px;
+        right: 0;
         z-index: 1;
     }
 
+    .nav-links li {
+        margin: 10px;
+        padding: 10px;
+    }
+
+    .nav-links a {
+        color: white;
+        text-decoration: none;
+    }
+
     .nav-links.active {
         display: flex;
     }