9.8 Building Navigation Menus (For Agency Websites)

Navigation menus are essential for Websites (less common in Funnels) to allow visitors to easily explore different pages.

  1. Add Navigation Menu Element: Drag the Navigation Menu element from the Elements Panel, typically into a Header Section (often a Global Section - see 9.9) at the top of your website template pages.
  2. Configure Menu Items: Select the Navigation Menu element → Click Edit Menu Items (or similar button) in the Settings Sidebar.
    • Add Items: Click + Add Item. Enter the Menu Item Text (e.g., "Home", "About Us", "Search Listings", "Seller Resources", "Contact Us").
    • Set Link Action: For each item, choose where it links:
      • Go to Page: Recommended. Select another page within this same Website project.
      • Go to URL: Paste the full URL for external links (e.g., your main IDX search page if hosted externally, link to Zillow profile).
      • Other options like Open Popup, Scroll To might be available.
    • Reorder & Create Submenus: Drag menu items up or down to change their order. Drag an item slightly to the right underneath another item to make it a submenu item (dropdown).
    • Click Submit or Save Menu when done arranging items.
  3. Add Logo: In the main Navigation Menu element settings, find the option to upload your Agency Logo. Upload the image file (use a transparent PNG for best results). Set the logo size and alignment. Crucially, set the Logo Image Link to go to your Homepage (Go to Page → select Homepage).
  4. Style the Menu: Use the Style options in the Settings Sidebar to customize:
    • Menu background color.
    • Link font, color, size, hover color.
    • Spacing between menu items.
    • Appearance of the mobile menu "hamburger" icon.
    • Styling for dropdown submenus.
  5. Check Mobile Menu: Switch to the Mobile View in the builder (See 9.10). Ensure the mobile hamburger menu appears correctly, opens smoothly, and the links inside are readable and easy to tap. You might need to adjust mobile-specific styling options for the menu. If the default mobile menu is problematic, you might need to create separate menus specifically for Desktop and Mobile views using the Visibility settings (See 9.10).