m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: smartin3.de — hamburger menu on mobile, nav no longer overflows

Browse Source
This commit is contained in:
m
2026-04-18 20:22:50 +02:00
parent 08739c6294
commit 1576ac892b
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sites/smartin3.de/index.html
View File

@@ -56,19 +56,21 @@
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
nav .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; } nav .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; overflow: hidden; }
.logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; white-space: nowrap; } .logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.logo .s { color: var(--text-dim); font-weight: 300; text-transform: lowercase; } .logo .s { color: var(--text-dim); font-weight: 300; text-transform: lowercase; }
.logo .martin { color: var(--orange); } .logo .martin { color: var(--orange); }
.logo .three { color: var(--blue); font-weight: 700; } .logo .three { color: var(--blue); font-weight: 700; }
.logo .d { color: var(--text); } .logo .d { color: var(--text); }
.nav-links { display: flex; gap: 16px; align-items: center; flex-shrink: 0; } .nav-links { display: flex; gap: 16px; align-items: center; }
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; white-space: nowrap; } nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; white-space: nowrap; }
nav a:hover { color: var(--text); } nav a:hover { color: var(--text); }
@media (max-width: 480px) { .nav-toggle { display: none; background: none; border: none; color: var(--text-dim); font-size: 1.4rem; cursor: pointer; padding: 4px; }
.nav-links { gap: 10px; } @media (max-width: 600px) {
nav a { font-size: 0.75rem; } .nav-links { display: none; position: absolute; top: 100%; right: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0 0 12px 12px; flex-direction: column; padding: 16px 24px; gap: 14px; min-width: 160px; }
.logo { font-size: 0.95rem; } .nav-links.open { display: flex; }
.nav-toggle { display: block; }
nav a { font-size: 0.9rem; }
} }
/* Hero */ /* Hero */
@@ -339,10 +341,11 @@
<nav> <nav>
<div class="container"> <div class="container">
<div class="logo"><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span><span class="d">D</span></div> <div class="logo"><span class="s">s</span><span class="martin">MARTIN</span> <span class="three">3</span><span class="d">D</span></div>
<button class="nav-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
<div class="nav-links"> <div class="nav-links">
<a href="https://www.instagram.com/smartin3d/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/smartin3d/" target="_blank" rel="noopener">Instagram</a>
<a href="https://www.etsy.com/shop/Smartin3de" target="_blank" rel="noopener">Etsy Shop</a> <a href="https://www.etsy.com/shop/Smartin3de" target="_blank" rel="noopener">Etsy Shop</a>
<a href="#kontakt">Anfrage</a> <a href="#kontakt" onclick="document.querySelector('.nav-links').classList.remove('open')">Anfrage</a>
</div> </div>
</div> </div>
</nav> </nav>