AM-WEB/floorithardwoodfloors.com
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix nav breakpoint + topbar wrap on narrow screens

Browse Source 
- Raise mobile nav breakpoint from 1023px to 1199px -- desktop nav needs 1200px+ (container max) to fit 7 links + phone + CTA without clipping
- Topbar: truncate text with ellipsis on <=600px to stay within fixed 44px height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Concept Agent
2026-05-31 15:46:38 +02:00
parent b94b66205f
commit 6a0f351dc2
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/components.css
+2 -3
View File
@@ -1447,9 +1447,8 @@ details.faq-item p {
.contact-layout { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; }
} }
/* Header: switch to mobile menu earlier : desktop nav with logo + 6 links /* Desktop nav needs 1200px+ (container max) to fit logo + 7 links + phone + CTA */
+ phone + CTA needs ~1024px to fit without overflowing. */ @media (max-width: 1199px) {
@media (max-width: 1023px) {
.header-nav { display: none; } .header-nav { display: none; }
.header-phone { display: none; } .header-phone { display: none; }
.header-menu-btn { display: flex; } .header-menu-btn { display: flex; }
assets/css/promo-popup.css
+7 -1
View File
@@ -51,8 +51,14 @@
body.has-topbar #site-header { top: 44px; } body.has-topbar #site-header { top: 44px; }
@media (max-width: 600px) { @media (max-width: 600px) {
#promo-topbar-text { font-size: 0.72rem; }
#promo-topbar { gap: 0.5rem; } #promo-topbar { gap: 0.5rem; }
#promo-topbar-text {
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
} }
/* Popup */ /* Popup */