---
title: "Navigation bar: edit your site menu"
description: "Edit the navigation bar shared across your whole site; a single edit updates the main menu on every page."
url: https://docs.vivlab.com/en/editor/menu/header
---

# Navigation bar

The **Navigation bar** panel appears as soon as you click on the navigation bar at the top of the [canvas](https://docs.vivlab.com/en/editor/canvas.md). The navigation bar is shared across every page of the site: editing it here updates the entire site in one go.

<DocsScreenshot name="editor-header-scroll" alt="Permanent, Static and Dynamic header scrolling modes." :width="341" :height="101" />

## Navigation bar

The **Blended navigation bar** option integrates the bar into the first section of every page (and removes its background so it blends in). Make sure every page on the site works with this option enabled: it changes the appearance of the first section everywhere.

The **Navigation bar scroll behavior** controls how it behaves when the visitor scrolls the page:

- **Permanent**: the bar always stays visible, even when scrolling.
- **Static**: the bar stays at the top of the page and disappears as soon as you scroll.
- **Dynamic**: the bar appears and disappears automatically based on scroll direction (visible when scrolling up, hidden when scrolling down).

## Navigation bar templates

The **Select a template** button opens a library of ready-to-use templates. Hover over a template to **Add** it as is, or click **Adapt content** to have the AI rework it with your site's content (a field then lets you adjust the result). The **Create from a blank bar** button starts from scratch.

In every case the current bar is **overwritten**: a confirmation is asked before the replacement.

## Automatic mobile layout

The **Automatic mobile layout** subsection generates the mobile layout of the bar's elements from their desktop organization, via the **Reorder elements** button. Only the mobile view is modified.

## Bar style

The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [background](https://docs.vivlab.com/en/editor/style/background.md), [inner spacing](https://docs.vivlab.com/en/editor/style/padding.md) and [border](https://docs.vivlab.com/en/editor/style/border.md) of the bar.

## Add an element to the bar

To insert a new element (logo, link, menu, cart button, etc.), keep the bar selected then click **Element** in the [top bar](https://docs.vivlab.com/en/editor/toolbar.md). Only the elements suitable for a header are then offered. See [Add an element](https://docs.vivlab.com/en/editor/menu/add-element.md) for the detailed list.