Navigation

Overview

This guide will help you manage the navigation blocks on your WordPress site built with a custom block theme. Your site includes three navigation menus:

1. Main Navigation (header)
2. Footer Navigation Column 2
3. Footer Navigation Column 3

Accessing the Navigation Blocks

1. Log in to your WordPress admin dashboard
2. Click on Appearance > Editor in the left sidebar
3. From the site editor, you can edit Navigation

Editing the Main Navigation

1. In the Site Editor, click on Navigation
2. Locate and click on the Navigation block to select it
3. The block toolbar and settings panel will appear

Key Features:

• Responsive Design: Your navigation automatically adjusts for mobile screens (breakpoint at 1095px)
• Styling: Uses your theme’s primary color scheme
• Dropdown Menus: Supports submenu items with proper styling

Editing Footer Navigation Columns

1. In the Site Editor, click on Navigation
2. Locate either Footer Navigation Column 2 or 3
3. Click to select the navigation block you want to edit

Footer Navigation Notes:

• Footer navigation uses a specialized style that displays submenus in a stacked format
• Links use the green color variable for better visibility on dark backgrounds
• Submenu items appear indented rather than in dropdown format

Adding/Editing Navigation Items

1. With the navigation block selected, click the Edit button in the toolbar
2. To add a new page/link:
   • Click the “+” icon
   • Select “Page” to add an existing page OR
   • Select “Custom Link” to add an external URL
3. To edit an existing link:
   • Click directly on the link text
   • Edit the text or URL in the settings panel
4. To create a submenu:
   • Select a navigation item
   • Click the “Make submenu” option (indented icon) in the toolbar
   • The item will become a child of the item above it

Navigation Block Settings

With a navigation block selected, use the settings panel (right sidebar) to control:

1. Layout Options:
   • Choose between horizontal or vertical orientation
   • Adjust justification (start, center, end)
   • Toggle submenu icon visibility
2. Color Settings:
   • Customize text and background colors
   • Note: Your theme uses predefined color variables
3. Typography Settings:
   • Adjust font family, size, and weight
   • Your theme uses the fonts defined in theme.json:
     • Sofia Pro (primary)
     • Gelica (headings)
     • IvyStyle Sans (subheadings)

Mobile Menu Behavior

Your theme includes custom mobile navigation styling:

• Below 1095px, the main navigation converts to a hamburger menu
• The menu icon has a border matching your site’s color scheme
• When opened, the mobile menu displays at full width with proper spacing

Best Practices

1. Keep it Simple: Limit main navigation to 5-7 top-level items
2. Use Descriptive Labels: Keep navigation labels clear and concise
3. Group Related Items: Use submenus for related content
4. Test Responsively: Always preview your navigation on desktop and mobile devices
5. Maintain Consistency: Keep navigation structure consistent across the site

Troubleshooting

If your navigation doesn’t appear correctly:

1. Check that menu items are properly assigned in the block
2. Verify that the navigation block hasn’t been accidentally removed
3. Test in both desktop and mobile views

For additional support, please contact your website administrator.