Skip to main content

Header and main navigation

How do you set up the header and main navigation?

The header appears on every page, so it is worth getting it right once. Edit it under Settings → Appearance → Header. This is where you choose the header layout, build the menu, and turn search and the language switcher on or off.

Changes go live across the whole website when you click Save header.

Nine header styles

Each has a different rhythm. You can switch styles at any time without losing the menu items.

TopNav

Logo and menu on one line. A safe default for content-heavy websites.

Centered

Centred logo and menu, with an optional tagline below the logo.

Sidebar

A column-based header that can also show the tagline.

Hamburger

The menu sits behind a button. Useful for portfolio-style sites where navigation should stay visually quiet.

TransparentHero

Designed for pages that open with a full-width image or visual hero.

UtilityBar

A slim utility row above the main navigation for announcements or contact details.

MegaMenu

A multi-column dropdown with an optional featured card. Useful for deeper site structures.

SplitNav

Logo in the centre with menu items split across both sides. Works well for editorial layouts.

FloatingPill

A pill-shaped header floating above the content. It works best when the page opens with a hero block.

You can also hide the header completely. Choose No header to hide the header, search and language switcher while keeping all settings saved for later. On a multilingual site, make sure the footer language switcher is enabled so visitors still have a way to change language.

Build the main navigation

Edit menu items under Navigation menu.

  1. Click Add link.
  2. Enter the label visitors should see in the menu.
  3. Set the destination. Start typing the title of one of your pages to select it from the list, or paste a full external URL (https://…).
  4. Reorder items by dragging rows or using Up and Down.

If a page selected from the list later changes URL, the menu item follows the new address automatically.

Remove a menu item: use the remove control at the end of the row. This only removes the link from navigation; the page itself stays in place.

Dropdown submenus

Use Add submenu under a menu item to add links that open in a dropdown. Submenus are one level deep: a submenu item cannot contain another submenu.

They are useful when you have enough pages that the main navigation would otherwise become crowded. For example, a Services item can contain links to individual service pages.

If the parent menu item also has its own destination, it stays clickable while a separate arrow opens the submenu. That way visitors can still reach the main Services overview page. The destination is optional, though: leave it empty and the item just opens its submenu, so you don't need an overview page for it.

Menus on multilingual websites

Menu labels are translated by language. Choose the language above the menu, then edit the labels and links for that version. A menu item's destination can differ by language too: give it another address in one language and it leads there in that language, or leave it empty to use the same destination everywhere. A page of your own picked from the list already opens in the visitor's language, so it needs no separate link. Each item can also be set visible only in selected languages, so a Hungarian-only page does not appear in the English menu.

When you create a new page, Demona asks whether to add it to the main menu. You can also choose the menu label at that point. If you skip it, add the page later from the Navigation menu settings.

Search and language switcher

Turn on Show search in header to let visitors search pages, news and events. Choose between two appearances:

  • Search icon: a compact button that opens the search field when clicked.
  • Search field: visible immediately on desktop.

You can place search before or after the menu, or in its own full-width band above or below the header. The band below the header has the most room and can also show a wide field on mobile. You can customise the placeholder text too. After searching, visitors see their query in the field and can clear it with one click.

The language switcher only appears when it is enabled and the website has published content in more than one language.

Custom colours: search and the language switcher can use colours independent of the header through the background, text-colour and opacity controls. Leave them blank to inherit the header styling. If you set only a background colour, Demona chooses a readable text colour automatically. Dropdown panels remain fully opaque even when the surrounding control is translucent, so their text stays legible.

Style-specific extras

  • Logo text: shown in place of a logo image. Defaults to the website name. On a multilingual site you can set it per language; where it is left empty, the website name is shown.
  • Tagline: shown by the Centered and Sidebar styles.
  • Utility row: available only with UtilityBar. Use it for short announcements such as “Free delivery over €50” or for contact details. Leave it empty to hide the row.
  • Mega panel: available only with MegaMenu. Adds a two- or three-column link list and an optional featured card with an image.

Colours, transparency and overlay behaviour

By default, the header uses your website's brand palette. For a more customised look:

  • Overlay the first section: the header floats over the top of the page, allowing the first block — for example a full-width image or video — to show behind it. As the visitor scrolls, it becomes a solid bar. Not every header style supports this. With Homepage only, the overlay applies just to the homepage while other pages keep the header above the content.
  • Shrink on scroll: once the visitor scrolls down, the header gets tighter and the logo smaller; back at the top it returns to full size. How much it shrinks has four steps: Slightly, Moderately, Strongly or As much as possible.
  • Background colour and opacity: choose a custom background with 0–100% opacity. If you do not set a text colour, Demona chooses a readable option from the brand palette.
  • Solid on scroll and background blur: control how a translucent header behaves while scrolling.
  • Solid dropdown background: keeps dropdown menus readable even when the main header is transparent.
  • Text colour and menu weight: control menu-item colour and font weight.
  • Spacing: adjusts the space between the header and page content, including the gap above a full-width first block.

Frequently asked questions

Quick fixes for common header and navigation issues.

HELP

Looking for another website setting?

The Help Center walks through the editor and the most important site settings step by step.