Navigation & Footer

Your site's navigation is the menu that lets visitors move between pages, and the footer is the band at the bottom of every page. You build both in the Navi panel (the compass icon in the editor's left toolbar), using its top toggle between Navigation and Footer.

Under Navigation there are four tabs:

Navigation type

In the Layout tab, pick one of three navigation types:

• Horizontal — a top bar with your logo and links across the top.
• Sidebar — a vertical menu down the left or right side.
• Burger — a compact button that opens a full menu overlay (see Burger menu below).

Below the type picker, Navigation Style lets you fine-tune the chosen type with a live preview:

• Horizontal — set Logo Position (left, center, right), Links Alignment (left, center, right), and Layout Mode (Columns or Rows).
• Sidebar — choose the Left or Right side, plus a Layout Order: Standard, Bottom Up, or Centered.
• Burger — set the Logo Position: Left, Center, or Right.

Managing links

Open the Links tab to manage your menu items.

• Click Add Link to create a link. Each link can point to:
  • Page — another page on your site
  • External — any URL (with an option to open in a new tab)
  • Email — opens the visitor's mail app
  • Anchor — jumps to a specific section on a page
• Drag the handle to reorder links.
• Use the switch on each link to show or hide it without deleting it.
• Click the pencil to edit a link or the trash to remove it.

Below the list, the Link Styling section controls how links look — font size, spacing, and colors.

Logo

In the Logo tab, set your logo as text (your site title) or upload an image. You can adjust size, font, weight, letter spacing, text transform, and colors. If you leave it as text, your site title is used.

You can hide the logo entirely from the Layout tab's visibility controls.

Colors

In the Layout tab (with Navigation enabled), you can set:

• Link colors — default, hover, and current-page colors for the logo, links, and social icons.
• Background — the navigation bar's background color and opacity.

To revert everything to your site theme, click Reset to theme defaults. Navigation colors follow your site theme unless you override them here.

Position & behavior

Still in the Layout tab, scroll to the layout and style controls:

• Position — Stacked (the header sits above your content) or Overlay (it floats over the first section).
• Sticky — keeps the navigation visible as visitors scroll.
• Blur Effect — adds a backdrop blur behind the bar.
• Show BG on Hover — reveals the background color only on hover.
• Navigation Width — Full, Wide, or Inset (horizontal and burger types).
• Padding Top / Padding Bottom — header spacing (Minimal, Small, Medium, Large).

Sidebar navigation has its own Padding Left and Padding Right controls instead of width and header padding.

Visibility & per-page overrides

The Layout tab has a Global / Current Page toggle.

• Global settings apply to every page. The visibility grid lets you turn the whole navigation, the logo, links, and social icons on or off.
• Current Page lets you override visibility, colors, and background for the page you're editing. Changes here create page-specific overrides; click Reset to Global to remove them.

Burger menu

Choose Burger as the navigation type for a compact menu button that opens a full-screen overlay. This works well on small screens and minimal designs.

To style the overlay, open the burger menu in the editor — its settings appear in a dedicated panel while the overlay is open. There you can set the overlay's:

• Background color
• Link color
• Close button color
• Show Social toggle

Social icons

Add and arrange social links in the Social tab. Below the list you can set the icons' color and hover color, plus size (Minimal, Small, Medium, Large, or a custom value) and spacing.

The footer

Switch the panel's top toggle to Footer to edit the band at the bottom of every page. Show Footer turns it on or off site-wide.

Footer type

Pick a layout for the footer:

• Simple — a single row with your logo, links, social icons, and copyright. Clean and compact.
• Columns — a multi-column grid where you group links under headings. Better for sites with many pages or sections.

Content

• Footer Links (Simple) — add, reorder, and edit links the same way you do for navigation.
• Link Columns (Columns) — create columns, give each a heading, and add links within it.
• Copyright Text — the line shown at the bottom (e.g. © your name).
• Tagline — an optional short line of text.
• Powered by Salon.io — toggle the "Powered by Salon.io" credit on or off.

Layout & style

• Width — Full, Wide, or Inset, matching your content width.
• Spacing and Top / Bottom Padding — the footer's internal spacing.
• Background — a background color, or make it Transparent to blend into your last section.
• Text — font weight, size, transform, and color for footer text.

Per-page footer

Like navigation, the footer has a Show footer on this page toggle so you can hide it on specific pages (a landing page, say) while keeping it everywhere else.

Going live

Changes save automatically. When you click Stop Editing (or the Preview pencil in the floating toolbar) to leave edit mode, the cache clears so your updated navigation goes live for visitors.

Related

• Pages — the pages your menu links to
• Site Themes — the default colors your navigation and footer inherit