From 992233f4cbe259fdf9da4825eeb4903a65256418 Mon Sep 17 00:00:00 2001 From: sefaria Date: Mon, 25 May 2026 00:23:45 +0200 Subject: [PATCH] Fixing desktop menu appereance --- css/style.css | 52 +++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index b249ea3..6de6a62 100644 --- a/css/style.css +++ b/css/style.css @@ -209,8 +209,7 @@ h3, h4, h5, h6, -p, -li { +p { scroll-margin-top: 80px; width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch)); } @@ -415,7 +414,7 @@ button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="p color: var(--color-text-button-active); } -button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover { +button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited { color: var(--color-text-button); text-decoration: none; } @@ -465,41 +464,46 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current .menu-bar .menu-left { display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - min-height: 44px; + align-items: stretch; + gap: var(--spacing-4); } -/* .desktop-nav { - height: 100%; - align-self: stretch; -} */ - .desktop-nav { - flex: 1; + flex: 1 1 auto; + display: flex; + align-self: stretch; background: light-dark(var(--color-neutral-200), var(--color-neutral-800)); border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); - padding: var(--spacing-2); - height: 100%; -} - -.desktop-nav ul, -.mobile-menu ul { - list-style: none; - margin: 0; - padding: 0; } .desktop-nav ul { display: flex; + align-items: stretch; + width: 100%; + margin: 0; + padding: var(--spacing-2); + list-style: none; gap: var(--spacing-2); } -/* .desktop-nav ul li { +.desktop-nav li { + flex: 1 1 0; + display: flex; + align-items: stretch; margin: 0; -} */ + padding: 0; + list-style: none; +} + +.desktop-nav .menu-button { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + white-space: nowrap; +} .desktop-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] {