Navigation Settings

Top-Level Toggle

Switch between Navigation and Footer settings at the top of the panel.

Footer

Toggle to show or hide the footer on all pages.

Navigation Panel Tabs

The navigation settings are organized into four tabs:

Layout Tab

Controls the overall appearance and behavior of your navigation.

Logo Tab

Configure your site logo - either text or an uploaded image. See Logo Settings below.

Links Tab

Manage navigation links and their styling. See Navigation Links below.

Social Tab

Add and style social media icons in your navigation. See Social Icons below.

Navigation Type

Choose your navigation layout style:

• Horizontal - Top navigation bar across the page
• Sidebar - Vertical navigation on the left side
• Burger - Hamburger menu icon (mobile-first design)

Visibility & Color Grid

Control which elements appear in your navigation:

Colors

Configure colors for navigation elements:

Logo Colors

• Default - Normal state color
• Hover - Color when hovering
• Active - Color for active/current state

Link Colors

• Default - Normal link color
• Hover - Color when hovering over links
• Active - Color for active/current page link

Social Icon Colors

• Default - Normal icon color
• Hover - Color when hovering over icons

Background

• Background Color - Navigation bar background color
• Background Opacity - Transparency level (0-100%)

Scope: Global vs Current Page

Switch between Global and Current Page to control whether settings apply site-wide or only to the current page.

Page-specific settings let you customize navigation appearance for individual pages, overriding global defaults.

Position & Behavior

Position

• Stacked - Navigation sits above page content
• Overlay - Navigation floats over the first section

Sticky

Keep navigation visible when scrolling down the page.

Blur Effect

Add a backdrop blur effect to transparent navigation backgrounds.

Show BG on Hover

Reveal the background color when hovering over the navigation area.

Layout Options

Navigation Width

Control how wide the navigation spans (horizontal and burger types only):

• Full - Edge to edge
• Wide - Contained with margins
• Inset - Narrower contained width

Style Selector

Choose alignment and layout variations based on your navigation type.

Horizontal styles:

• Logo left, links centered
• Logo left, links right
• Logo centered, links split
• And more...

Sidebar styles:

• Standard layout
• Bottom-up layout
• Centered layout

Burger styles:

• Logo left, burger right
• Logo right, burger left
• Logo centered, burger right

Padding

Control vertical spacing with Top and Bottom padding presets:

• Minimal - Compact spacing
• Small - Default spacing
• Medium - Comfortable spacing
• Large - Generous spacing

For sidebar navigation, you can also control:

• Padding Left
• Padding Right

Logo Settings

Configure your site logo in the Logo tab:

Logo Type

• Text - Use your site name as a text logo
• Image - Upload a logo image

Text Logo Options

• Font family
• Font size
• Font weight
• Letter spacing

Image Logo Options

• Upload image
• Set width and height
• Alt text for accessibility

Logo Link Colors

Customize how the logo appears in different states (default, hover, active).

Navigation Links

Manage your navigation links in the Links tab:

Managing Links

• Add pages to navigation
• Reorder by dragging
• Remove links from navigation

Link Styling

• Font family
• Font size
• Font weight
• Text transform (uppercase, lowercase, capitalize)
• Letter spacing
• Link colors (default, hover, active)

Social Icons

Add social media links in the Social tab:

Adding Social Links

Add links to platforms like Instagram, Twitter/X, YouTube, LinkedIn, and more.

Social Icon Styling

Size presets:

• Minimal (14px)
• Small (18px)
• Medium (22px)
• Large (28px)

Icon Colors:

• Default color
• Hover color

Spacing:

• Minimal
• Small
• Medium
• Large

Burger Menu Overlay

When using the Burger navigation type, the menu opens as a full-screen overlay. Access overlay settings by opening the burger menu in the editor.

See Mobile Menu for detailed overlay customization options.