Navigation Style Customization Guide

Site navigation links help visitors explore your content. Learn how to customize their appearance across your website.

Before You Start

• Add navigation links through the Pages panel
• Edit link text via Navigation Title in Page Settings
• Arrange links by dragging and dropping in Pages panel
• Unlinked pages won't appear in navigation

Font and Size Customization

In Version 7.1:

1. Open Site Styles
2. Navigate to Fonts > Assign Styles
3. Select "Site Navigation"
4. Choose font family, weight, and size
5. Save changes

In Version 7.0:

1. Access Site Styles
2. Look for Navigation tweaks
3. Adjust font name, style, size, spacing

Color Customization

Version 7.1:

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

Version 7.0:

1. Access Site Styles
2. Open Colors section
3. Edit Navigation Link color
4. Save changes

Layout and Spacing

• Desktop: Adjust header display mode
• Mobile: Customize menu icon appearance
• Template-specific options available for position and alignment
• Look for Navigation Position or Alignment tweaks

Mobile Navigation Features

• Links collapse behind Menu/☰ icon
• Header buttons remain visible
• Font size fixed on mobile
• Template-specific display options
• Some templates allow icon customization

Template-Specific Display

Common layouts include:

• Horizontal top navigation
• Vertical sidebar navigation
• Center/left/right alignment options
• Responsive breakpoints for mobile view

Advanced Options

• Hover effects for link interaction
• Active state styling for current page
• Custom spacing and padding
• Mobile breakpoint adjustments
• Icon visibility controls

Remember: Mobile display options vary by template and version. Consult your template guide for specific features and limitations.

Related Articles

Previous Articles