From 8d536a5fe3e99c8750c8020cd7dcea3be9a9e24b Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 13 Jan 2026 14:57:19 +0000 Subject: [PATCH] fix: add mobile responsive styles to navigation menu Add media query for screens under 600px to prevent horizontal overflow: - Allow nav and nav-links to wrap - Reduce gap between navigation items - Slightly reduce font size and padding --- src/layouts/BaseLayout.astro | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 6f7b672..8402c9a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -242,6 +242,26 @@ const fullTitle = title === 'Home' ? 'TechShoulders' : `${title} | TechShoulders .footer-links a:hover { color: var(--color-link); } + + @media (max-width: 600px) { + .nav { + flex-wrap: wrap; + gap: 0.75rem; + } + + .nav-links { + gap: 0.75rem; + flex-wrap: wrap; + } + + .nav-links a { + font-size: 0.85rem; + } + + .nav-browse { + padding: 0.25rem 0.625rem; + } + }