Side Header places logo and navigation in a fixed 260px left sidebar on desktop — modern and brand-forward. Ideal for agencies, designers, photographers, and startups that care about whitespace and identity. Below 768px it switches to a hamburger menu automatically.
Test desktop scroll and mobile drawer behavior in the live demo hub Side Header preview.
Best for
- Creative portfolios and agency sites
- Personal sites with social links or mini bio in the sidebar
- Brands that prefer side branding over a top bar
- Layouts keeping nav fixed while maximizing content width
What you can try in the live demo
The Side Header live demo shows:
- Fixed 260px left sidebar — logo, menu, social icons
- Wide main content area beside the sidebar
- Active/hover states on vertical nav links
- Automatic hamburger switch under 768px
- Mobile drawer with overlay open/close
- Hero, gallery, and text sections in the main column
Layout features
Vertical navigation becomes the brand spine — it stays visible while scrolling. You can reuse Corporate-like sections in the main column; only the chrome changes dramatically. CSS switches automatically when you pick Side Header in Design Settings.
How it differs from other types
- Corporate / Corporate Pro — horizontal top nav; Side Header is left-fixed
- Hero Header — transparent top bar over hero; Side Header keeps a persistent sidebar
- Blog — right widget sidebar; Side Header’s left bar is primary navigation
Setup tips
- Design Settings → site type Side Header
- Use a logo that fits the narrow sidebar
- Limit menu items (~5–7) for readable vertical nav
- Check CTA and social links in Header Settings
- Test hamburger tap targets on real mobile devices
Try it now
For distinctive branding, try Side Header. Open the live demo on desktop and phone, then compare all nine at the demo hub.
