Mobile Menu (Burger Menu)
The mobile menu provides navigation on smaller screens. When you select the Burger navigation type, visitors tap a hamburger icon to open a full-screen overlay with navigation links.
Accessing Overlay Settings
To customize the burger menu overlay:
- Select Burger as your navigation type
- Click the hamburger icon in the editor preview
- The overlay will open with a settings panel
Global and Page-Specific Settings
Control how your burger menu overlay appears across your site:
Global Settings
Apply to all pages by default. Configure:
- Logo visibility and sizing (Tiny, Small, Medium, Large, Lock)
- Social links visibility, sizing, and position (Below Links or Header)
- Link styling, spacing, and typography
Current Page Settings
Override global settings for specific pages. Available overrides:
- All color settings (logo, links, social, close button, background)
- Background opacity
Use the Reset to Global button to remove page-specific overrides.
Color Settings
Configure colors for all burger menu elements in an organized matrix:
Logo Colors
- Link: Default logo color
- Hover: Logo color on hover
- Current: Logo color when on current page
Navigation Links
- Link: Default text color for navigation items
- Hover: Text color when hovering over links
- Current: Text color for the current page link
Social Icons
- Link: Default social icon color
- Hover: Social icon color on hover
Background
- Color: Full-screen backdrop color
- Opacity: Background transparency (0-100%)
Close Button
- Close: Default X button color
- Hover: X button color on hover
Each color includes a visual swatch, hex input field, and preset color options.
Logo Settings
Control logo display in the overlay:
- Visibility: Toggle logo on/off
- Size: Choose from Tiny, Small, Medium, Large, or Lock (custom sizing)
Social Links
Configure social media links:
- Visibility: Show/hide social links
- Size: Choose from Tiny, Small, Medium, Large, or Lock
- Position: Place Below Links or in Header area
Link Typography & Styling
Customize navigation link appearance:
Sizing & Spacing
- Size Links: Choose from Tiny, Small, Medium, Large
- Link Spacing: Control vertical space between links
Typography Options
| Setting | Options |
|---|---|
| Font Family | Theme Default, Inter, System UI, Georgia, Playfair Display, Roboto, Open Sans, Lato, Montserrat, Source Sans Pro |
| Font Weight | Light (300), Regular (400), Medium (500), Semi-Bold (600), Bold (700) |
| Text Transform | None, UPPERCASE, lowercase, Capitalize |
| Letter Spacing | Tight, Normal, Slight, Wide, Extra Wide |
Current Page Decoration
Choose how to highlight the current page:
- None
- Underline
- Border Bottom
- Dot Indicator
- Bold
- Italic
- Background
Reset Controls
Two reset options are available:
Reset to Global (Page scope only)
When customizing a specific page, use this to remove all page-specific overrides and revert to global settings.
Reset to Theme Defaults
Resets all settings to the original theme defaults:
- Shows logo, links, and social
- Small logo and social sizing
- Medium link sizing with normal weight
- No text transformation or current page decoration
Tips
- Use high contrast between background and link colors for readability
- Dark backgrounds work well for photography portfolios
- Match colors to your site's overall theme
- Test the overlay on actual mobile devices
- Use page-specific settings sparingly to maintain consistency
- Lock sizing gives you custom size control beyond presets