From a7cc2e390b014a4e4cfdd4a08f67facd53c1bcbf Mon Sep 17 00:00:00 2001 From: Gaurav Date: Sun, 21 Jan 2024 17:54:01 +0530 Subject: [PATCH] updating on a navbar and footer --- navbar and footer/index.html | 2 ++ navbar and footer/styles.css | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/navbar and footer/index.html b/navbar and footer/index.html index c1f2915..d61c3a2 100644 --- a/navbar and footer/index.html +++ b/navbar and footer/index.html @@ -4,6 +4,8 @@ + + Responsive Navbar and Footer diff --git a/navbar and footer/styles.css b/navbar and footer/styles.css index 72c902f..bc55a96 100644 --- a/navbar and footer/styles.css +++ b/navbar and footer/styles.css @@ -40,6 +40,7 @@ display: none; flex-direction: column; cursor: pointer; + } .menu-toggle span { @@ -47,6 +48,19 @@ 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; }