Navigation is a crucial element that helps visitors explore your site's content. Here's how to customize it effectively:

Finding Navigation Settings

Version 7.1:

• Access header editor to modify navigation layout, colors, spacing, and mobile display
• Use Site Styles for font and size adjustments

Version 7.0:

• Open Site Styles via Design panel
• Look for settings containing "Navigation"
• Click navigation links in preview to filter relevant settings

Font and Size Customization

Version 7.1:

1. Open Site Styles > Fonts
2. Click Assign Styles
3. Select Site Navigation
4. Customize font family, weight, size, and style

Version 7.0:

• Modify font name, style, size, line height, and letter spacing through dropdown menus

Color Settings

Version 7.1:

1. Open header editor
2. Click Style
3. Adjust Navigation Color

Version 7.0:

1. Access Site Styles > Colors
2. Edit header color palette
3. Modify Navigation Links setting

Layout and Spacing

Desktop:

• Position varies by template (horizontal/vertical)
• Adjust spacing through Padding, Spacing, or Width settings
• Some templates offer hover and active state customization

Mobile:

• Navigation collapses behind menu icon (☰)
• Customize through header editor (7.1) or template-specific settings (7.0)
• Icon visibility varies by template and screen width

Template-Specific Features:

• Each template family has unique navigation positions
• Mobile breakpoints vary by template (640px-1024px)
• Some templates allow hiding menu icons
• Options for secondary navigation and footer links (7.0)

Important Notes:

• Keep navigation titles concise for better desktop display
• Consider using dropdown menus for multiple pages
• Mobile navigation inherits desktop styles for consistency
• Custom code solutions available for advanced modifications

Related Articles

Previous Articles