feat: add mobile bottom navigation bar
Replace cramped horizontal nav on mobile with a fixed bottom tab bar for thumb-friendly navigation. The header nav is now hidden on mobile (<768px) and the bottom nav provides Home, Shop, About, and Contact links with icons. - Add mobile_bottom_nav component with icon + label nav items - Active page has accent-colored background highlight and larger icon - Add shadow to lift nav visually off the page - Update all page templates with bottom padding and bottom nav - Remove CSS rule that was overriding Tailwind's hidden class - Responsive header padding (tighter on mobile) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -413,10 +413,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Shop nav display */
|
||||
.shop-nav {
|
||||
display: flex;
|
||||
}
|
||||
/* Shop nav display - hidden on mobile, flex on md+ (via Tailwind classes in component) */
|
||||
/* Note: Removed explicit display:flex here as it overrides Tailwind's hidden class */
|
||||
|
||||
/* =============================================
|
||||
STANDALONE COMPONENTS (Context-independent)
|
||||
|
||||
Reference in New Issue
Block a user