From 109fa8d0efafa171c9cf6dfd6ed24ee4159a9121 Mon Sep 17 00:00:00 2001 From: KGFCH2 Date: Tue, 2 Jun 2026 18:47:34 +0530 Subject: [PATCH] feat(ui): add responsive hamburger navbar for mobile devices MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The navigation bar had no mobile adaptation — on screens narrower than 768px, the nav links and auth buttons overflowed the viewport, causing a broken horizontal-scroll experience. Changes: - Add .hamburger button (3-bar icon) visible only on mobile (≤768px) - Nav slides in/out below the header when hamburger is toggled - Hamburger animates into an X when menu is open (CSS transform) - Proper ARIA attributes: aria-expanded, aria-controls, aria-label - Escape key closes the menu and returns focus to the toggle button - Nav links close the menu automatically on click - Fix Windows-only backslash paths (log\login.html → log/login.html) which fail on Linux/macOS servers and GitHub Pages - Add semantic
wrapper and role attributes for accessibility - Add explicit width/height on hero image to reduce Cumulative Layout Shift --- index.html | 85 ++++++++++++++++++++++++++-------- styles.css | 132 +++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 180 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 64bb324..d911608 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,30 @@ - + LearnSphere - Quality Education -
- -
+ diff --git a/styles.css b/styles.css index 6b1a3d4..61940a3 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,7 @@ * { box-sizing: border-box; } + body { background: linear-gradient(135deg, #0d0d0d, #1a1a2e); color: #ffffff; @@ -11,7 +12,7 @@ body { min-height: 100vh; } -/* Navbar */ +/* ─── Navbar ──────────────────────────────────────────────────────────────── */ .navbar { display: flex; justify-content: space-between; @@ -19,12 +20,21 @@ body { background: #002244; padding: 15px 20px; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); + position: relative; + z-index: 100; } .logo { font-size: 1.8rem; font-weight: bold; color: cyan; + flex-shrink: 0; +} + +.logo a { + text-decoration: none; + color: inherit; + font-weight: bold; } .navbar ul { @@ -42,11 +52,21 @@ body { text-decoration: none; color: white; font-size: 1.2rem; - transition: 0.3s; + transition: color 0.3s; } -.navbar ul li a:hover { +.navbar ul li a:hover, +.navbar ul li a:focus { color: cyan; + outline: 2px solid cyan; + outline-offset: 2px; + border-radius: 2px; +} + +.buttons { + display: flex; + gap: 8px; + flex-shrink: 0; } .buttons button { @@ -57,7 +77,7 @@ body { border-radius: 5px; cursor: pointer; font-size: 1rem; - transition: 0.3s; + transition: background 0.3s; } .buttons button a { @@ -69,7 +89,43 @@ body { background: #0056b3; } -/* Hero Section */ +/* ─── Hamburger Menu Button ───────────────────────────────────────────────── */ +.hamburger { + display: none; + flex-direction: column; + justify-content: space-between; + width: 28px; + height: 20px; + background: none; + border: none; + cursor: pointer; + padding: 0; + z-index: 200; +} + +.hamburger span { + display: block; + height: 3px; + width: 100%; + background: #ffffff; + border-radius: 3px; + transition: transform 0.3s ease, opacity 0.3s ease; +} + +/* Animate hamburger to X when open */ +.hamburger.is-open span:nth-child(1) { + transform: translateY(8px) rotate(45deg); +} + +.hamburger.is-open span:nth-child(2) { + opacity: 0; +} + +.hamburger.is-open span:nth-child(3) { + transform: translateY(-9px) rotate(-45deg); +} + +/* ─── Hero Section ────────────────────────────────────────────────────────── */ .hero { display: flex; justify-content: center; @@ -110,35 +166,74 @@ body { font-size: 1rem; cursor: pointer; border: none; - transition: 0.3s; + transition: background 0.3s; } .cta:hover { background: #0056b3; } -.logo a { - text-decoration: none; - color: inherit; - font-weight: bold; -} - .cta a { - text-decoration: none; - color: inherit; - font-weight: bold; + text-decoration: none; + color: inherit; + font-weight: bold; } .hero-image img { width: 400px; max-width: 100%; border-radius: 10px; - /* box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); */ filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.3)); } -/* Responsive Design */ +/* ─── Responsive — Mobile ─────────────────────────────────────────────────── */ @media (max-width: 768px) { + /* Show hamburger button */ + .hamburger { + display: flex; + } + + /* Nav slides in from the top when open */ + .navbar nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: #002244; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + padding: 12px 0; + z-index: 99; + } + + .navbar nav.is-open { + display: block; + } + + .navbar ul { + flex-direction: column; + align-items: center; + gap: 0; + } + + .navbar ul li { + margin: 0; + width: 100%; + } + + .navbar ul li a { + display: block; + padding: 12px 20px; + text-align: center; + font-size: 1.1rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + } + + /* Hide auth buttons on very small screens to save space */ + .buttons { + display: none; + } + .hero { flex-direction: column; text-align: center; @@ -149,7 +244,8 @@ body { } } +/* ─── Animations ──────────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } - to { opacity: 1; transform: translateY(0); } + to { opacity: 1; transform: translateY(0); } }