Setting Up Navigation and Headers

Good navigation helps visitors find their way around your site. Here's how to set it up effectively.

Navigation Basics

What Appears in Navigation

• Pages marked as "Navigation Pages" appear in your menu
• Sub pages can appear in dropdown menus
• Pages can be hidden from navigation while still accessible

Managing Navigation Pages

Adding Pages to Navigation

Open the Pages drawer (left side of header)

Create or select a page

Ensure "Show in Navigation" is enabled in page settings

Page appears in your navigation bar

Removing from Navigation

Click the settings icon next to a page

Toggle off "Show in Navigation"

Page is still accessible via direct link

Reordering Navigation

Drag and drop pages in the Pages panel to change their order in the navigation menu.

Header Customization

Accessing Header Settings

Look at your navigation bar in the editor

On the left side, click the paintbrush button

A popover opens with styling options

Header Elements

Your site header includes:

• Site logo/avatar image
• Site title and description
• Navigation page tabs
• Optional CTA buttons (up to 2)

Editing Site Logo & Info

Click on the logo/title area in the navigation bar

A popover opens with "General information" settings:

• Image - Upload or delete your logo/avatar image
• Hide Image - Toggle to hide the image completely
• Border Radius - Adjust image roundness (0-50%)
• Image Width - Resize the image (40-170px)
• Title - Edit your site title with font, weight, and size options
• Description - Edit your tagline with font, weight, and size options

Adding Navigation Buttons

Your header can have up to 2 CTA buttons:

Look for "Add button" placeholders on the right side of the navigation

Click to add a button

Customize the button text, link, and styling

Perfect for "Contact", "Get Started", or "Sign Up" CTAs

Page & Header Styling

Click the paintbrush button on the navigation bar to access the styling popover:

Page Styling

• Page Background - Set the background color for the current page
• Page Text - Set the default text color for the page

Header Styling

• Border Color - Color of the navigation bar border
• Background Color - Navigation bar background color
• Background Blur - Frosted glass blur effect (0-10)
• Border Width - Thickness of the border (0-4px)
• Border Radius - Roundness of nav bar (only for rounded navigation style)

Tab Styling

• Tab Background - Background color of navigation tabs
• Tab Border - Border color of navigation tabs
• Tab Text - Text color of navigation tabs
• Active Tab Background - Background of the selected tab
• Active Tab Border - Border of the selected tab
• Active Tab Text - Text color of the selected tab
• Site Title Color - Color for the site title in the header

Creating Dropdown Menus

Adding Sub Pages

Open Pages panel

Drag a page onto another page

It becomes a sub page

Parent shows dropdown on hover

Organizing Dropdowns

• Keep dropdowns shallow (1-2 levels)
• Group related pages together
• Use clear, descriptive names

Mobile Navigation

Hamburger Menu

On mobile devices, navigation collapses to a hamburger menu (☰):

• Tap to open
• Shows all navigation pages
• May include sub pages in expandable sections

Mobile Menu Styling

The mobile menu automatically inherits your theme colors. For custom styling, use AI:

"Customize the mobile navigation menu with a dark background"

Navigation Best Practices

Keep It Simple

• Limit top-level items (5-7 max)
• Use clear, action-oriented labels
• Most important pages first

Clear Labels

Good labels:

• Home
• Products
• About
• Contact
• Pricing

Avoid:

• Vague terms
• Jargon
• Overly creative names

Highlight CTAs

Make your main call-to-action stand out:

• Use a button style
• Different color from other links
• Position at the end of navigation

Common Navigation Patterns

Standard

Logo left, navigation center or right, CTA button

Centered

Logo center, navigation split on both sides

Mega Menu

Large dropdown with multiple columns (for complex sites)

Minimal

Logo only, with hamburger menu for all navigation