Header
Overview
The Header in Label One theme offers three distinct layouts with extensive customization options. It serves as the primary navigation hub for your store, featuring logo placement, menu organization, search functionality, and account/cart access. The header is fully responsive with a dedicated mobile experience.
Header Layout Options
The theme provides three header layouts that can be selected in Theme Settings → Header:
- Centered - Logo centered at the top with menu below
- Inline - Logo and menu on the same line (left or center logo position)
- Vertical - Side navigation with logo above
Global Header Settings
| Setting | Description | Options |
|---|---|---|
| Header layout | Controls the overall header structure | Centered, Vertical, Inline |
| Sticky header | Makes header stay visible when scrolling | On/Off |
| Transparent background | Makes header background transparent | On/Off |
Common Features Across All Layouts
Menu Configuration
| Setting | Description | Options |
|---|---|---|
| Main menu | Menu to display in header | Link list selection |
| Menu item spacing | Controls space between menu items | 0-3em |
| Submenu padding | Controls padding within dropdown menus | None, Small, Medium, Large |
| Top right page | Page link displayed in utility section | Page selection |
Logo Settings
| Setting | Description | Options |
|---|---|---|
| Main logo | Primary logo image | Image picker |
| Alternative logo | Secondary logo (for transparent headers) | Image picker |
| Logo width (desktop) | Controls logo size on larger screens | 100-300px |
| Logo width (mobile) | Controls logo size on mobile devices | 60-160px |
| Extra header height | Adds additional space in header | 0-30px |
Mobile Menu Settings
| Setting | Description | Options |
|---|---|---|
| Mobile drawer image | Promotional image in mobile menu | Image picker |
| Mobile drawer image link | URL for the promotional image | URL |
| Image alignment | Position of image in drawer | 9 position options |
| Image text | Overlay text on promotional image | Text |
| Text color | Color of the overlay text | Color picker |
| Text size | Size of the overlay text | XS to XL |
Layout-Specific Features
Centered Header
- Logo positioned in center of the header
- Menu displayed horizontally below logo
- Utility items (search, account, cart) positioned at top right
- Option to enable full-width menu
- Option to hide navigation on scroll
Inline Header
- Logo and menu on same horizontal line
- Two logo position options: left or center
- Menu flows around the logo
- Clean, space-efficient design
Vertical Header
- Side navigation panel with vertical menu structure
- Logo positioned at the top
- Controls for submenu indentation
- Collapsible design with toggle button
- Utility navigation at the top right
Mega Menu Functionality
All header layouts support mega menus through blocks that can be added to any header section:
| Setting Category | Key Features |
|---|---|
| Menu Activation | Enter exact menu title to activate mega menu |
| Navigation Styling | Menu title boldness, text sizes for each level |
| Promotional Content | Two promotional images with custom titles and links |
| Visual Settings | Image focal points, text positioning, optional image tint |
Mobile Header
The mobile header is automatically generated based on your header settings and provides:
- Hamburger menu toggle
- Mobile-optimized logo
- Slide-out navigation drawer
- Collapsible menu hierarchy
- Optional promotional banner
- Cart and account access
Best Practices
Centered Header
- Works well for brands where the logo is the focal point
- Best with concise menu structures (5-7 top-level items)
- Consider enabling full-width menu for longer menus
- Effective for showcasing brand identity
Inline Header
- Ideal for maximizing screen real estate
- Efficient for stores with limited menu items
- "Left" logo position works well for text-based logos
- "Center" logo position creates balanced look with equal menu items on each side
Vertical Header
- Perfect for stores with extensive categorization
- Provides more space for descriptive menu items
- Creates a unique browsing experience
- Works best with adequate screen width
General Tips
- Keep menu items concise and descriptive
- Use mega menus for categories with many subcategories
- Consider using transparent header on homepage for visual impact
- Test mobile menu experience thoroughly
- Adjust logo size to balance with menu items
Advanced Customization
Mega Menu Setup
- Add a Mega Menu block to your header section
- Enter the exact name of the menu item to activate
- Configure text sizes and styling
- Add promotional images with links
- Position text and adjust focal points
Transparent Header
When enabling transparent header:
- Upload an alternative logo if your main logo doesn't contrast with background content
- Consider text color visibility against varying backgrounds
- Test on mobile devices to ensure readability
Mobile Drawer Promotion
The promotional area in the mobile drawer can be used to:
- Highlight current sales or promotions
- Showcase new collections
- Provide store announcements
- Link to important pages or collections
This documentation covers all aspects of the Label One theme's header system, helping you create a navigation experience that complements your brand identity and enhances user experience across all devices.