Navigation links direct visitors to your site's content, typically displayed at the top of the site. Here's how to customize their appearance effectively:

Font Customization

To modify navigation fonts in version 7.1:

• Open Site Styles > Fonts
• Click Assign Styles > Site Navigation
• Choose font family, weight, and style
• Adjust size using presets or custom rem values

For version 7.0:

• Navigate to Site Styles
• Look for Navigation-related tweaks
• Modify font name, style, size, line height, and letter spacing

Color Adjustments

Version 7.1:

• Open header editor > Style
• Click Navigation Color to modify links and social icons
• Adjust mobile header overlay colors separately

Version 7.0:

• Access Site Styles > Colors
• Edit the selected color set for site header
• Modify Navigation Link settings

Layout and Spacing

Version 7.1:

• Edit header display mode for desktop
• Customize mobile menu icon appearance
• Adjust link spacing and positioning

Version 7.0:

• Modify navigation position through Site Styles
• Look for Navigation Position/Alignment tweaks
• Adjust padding and spacing between links

Mobile Navigation

Key features:

• Links collapse behind Menu/☰ icon on mobile
• Customizable menu icon style and placement
• Header buttons remain visible
• Font size remains fixed on mobile
• Template-specific display options available

Tips for Optimal Navigation:

• Keep navigation titles concise
• Use dropdown menus for related pages
• Consider template-specific limitations
• Adjust breakpoints for mobile display
• Test across different device sizes

Navigation display varies by template family, with options for horizontal or vertical layouts, and different positioning choices (left, center, right). Each template offers unique customization options for both desktop and mobile views.

Related Articles

Previous Articles