Show all nav items on mobile instead of collapsing

The menu collapsed to a hamburger below 640px, which was roughly twice
the width the items actually need: measured with Segoe UI Semibold, the
five entries occupy 296px against 343px available at a 375px viewport.

Drops the toggle entirely and scales the column gap and font size with
clamp() instead, so there is no breakpoint at all. flex-wrap handles the
extreme case -- below ~330px the row wraps to two lines, which still
shows every item rather than hiding them.

Also removes the checkbox-and-label toggle hack, which announced itself
as a checkbox and carried no aria-expanded state.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-30 16:23:57 +02:00
parent 2fcb2fd219
commit f7ea9cde45
3 changed files with 7 additions and 35 deletions
-4
View File
@@ -22,10 +22,6 @@
<nav class="site-nav" aria-label="Hauptnavigation">
<div class="container">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span aria-hidden="true"></span> Menü
</label>
<ul class="nav-list">
<li><a href="{{ "/" | relURL }}"{{ if .IsHome }} aria-current="page"{{ end }}>Start</a></li>
{{ range site.Menus.main }}