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:
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user