Navigation helps direct visitors to your website's content through a series of links, typically displayed at the top of your site. Here's how to customize your navigation effectively.

Basic Navigation Setup

• Add pages in the Pages panel to create navigation links
• Change link text via Page Settings
• Reorder links by dragging and dropping in the Pages menu
• Unlinked pages won't appear in navigation

Customizing Navigation Style

Version 7.1

• Use Header Editor to modify:
  • Layout and colors
  • Link spacing
  • Text padding
  • Fixed positioning
  • Desktop vs. mobile appearance

Version 7.0

• Access Website Styles menu
• Look for "Navigation" settings
• Click navigation links in preview for specific options

Font and Size Customization

Version 7.1

1. Open Website Styles > Fonts
2. Click Assign Styles
3. Select Website Navigation
4. Choose font family, weight, and size

Version 7.0

• Adjust font name, style, size, line height, and letter spacing through drop-down menus

Color Adjustments

Version 7.1

1. Open Header Editor
2. Click Style
3. Select Navigation Color

Version 7.0

1. Open Website Styles > Colors
2. Edit header color scheme
3. Modify Navigation Links setting

Mobile Navigation

• Links collapse behind menu icon (☰) on mobile devices
• Customize mobile layout in Header Editor
• Different templates have varying mobile breakpoints
• Some templates allow icon customization or removal

Key Mobile Considerations:

• Header buttons remain visible
• Font size usually can't be changed
• Menu icon visibility varies by template
• Remove menu icon by unlinking pages

Template-Specific Navigation

Different templates offer various navigation layouts:

• Horizontal (top left/center/right)
• Vertical (sidebar)
• Split around website title
• Overlay designs

Advanced Features:

• Active link styling
• Hover effects
• Custom spacing
• Responsive breakpoints
• Drop-down menus

For best results, keep navigation titles concise and limit the number of menu items to prevent automatic collapsing on desktop views.

Related Articles

Previous Articles