Navigation Header

The Navigation Header section on your website provides visitors with essential information like your business logo, navigation links, contact details, and a shopping cart. To help visitors navigate your website, you can modify a homepage, hide and rename menu items, create sub-items, and more. 

  • For websites with multiple pages, navigation header items are the page names by default. The navigation header is automatically updated when you add a new page to your website.  Also, you can set such navigation header items as the dropdowns, anchors or external URLs.
  • For single-pager websites, the navigation menu items can be the titles of page sections or external URLs.

Table of Contents

Adding a Navigation Header

  • Hover over the desired section, and click Add Section:

An Add Section control appears between page sections when you hover over the gap between them.

  • In the modal that opens, choose the Navigation Header section type and click Select:

The Add Section modal shows section categories; select the Navigation Header layout you want.

  • The new Navigation Header section will immediately appear. You can now modify the Navigation Header section to suit your needs.

Resizing Navigation Header

  • Hover over the Navigation Header to display the Resizing Control at the bottom of the section:

A horizontal drag handle appears along the bottom edge of the header when hovered.

  • Click and drag the Resizing Control up or down to adjust the height of the header.
  • Click on the Navigation Header to show the Navigation Header Menu: 

  • You can relocate the Navigation Header Menu by grabbing it and dragging it to the desired place:

A small toolbar appears attached to the header with buttons such as Layout, Settings, and Delete.

Customizing the Navigation Header Layout

Click the Layout button in the Navigation Header Menu to open the toolbar:

Main Header Section

Main Header is a primary section of your website's header, which is pre-populated with elements and can't be empty. Proceed to the Main Header section to modify its content:

  • Add Header elements (Social, Button, Slogan or Menu) by clicking the Add Element button:

The Layout panel lists current header elements with an Add Element button above them.

  • The selected element will immediately appear in the header.

Please Note: You can add up to two Buttons to each Header section. All other elements: Social, Slogan, and Menu are limited to one per section. A Slogan can be added either to the Top bar or the Bottom bar.

  • Edit each element by hovering over and clicking Edit on its right:

Header layout menu is opened with Edit button highlighted to the right of the Logo element.

  • Drag and drop elements to reorder them:

Header layout menu is opened with an arrow indicated an element is selected and being dragged.

  • Delete elements by hovering over and clicking the Remove [Bin] button on its right:

Header layout menu is opened with the Bin icon highlighted to the right of the Logo element.

Top Bar Section

Top Bar is an optional section that initially is empty. The section will appear on the website after you add elements:

  • To add an element to the Top Bar, click the Add Feature button, and select among Menu, Social, Button, and Slogan.
  • The selected element(s) will immediately appear in the Top Bar. If you remove the last item, the Top Bar disappears automatically.

Header layout menu is opened with Top bar elements listed. Add feature icon is highlighted at the top right.

Bottom Bar Section

Bottom Bar is an optional section that initially is empty. The section will appear on the website after you add elements:

  • To add an element, click Add Feature to add Button, Slogan, Social or Menu.
  • The selected element(s) will immediately appear in the Bottom Bar. If you remove the last item, the Bottom Bar disappears automatically.

Header layout menu is opened with Bottom bar elements listed. Add feature icon is highlighted at the top right.

Style Settings

The Style settings of the Main Header, Top Bar, or Bottom Bar allow you to change the following in the Layout Settings:

  • Element Color. Click the square to open the color picker and select the default color for the Navigation Header items (the Item Color settings are also applied to the Logo Color settings).
  • Hover Color. Open the color picker and select the Hover color.
  • Alignment. Align elements to the right, left, or place it in the center.
  • Background Color. Click the square to open the color picker and select the website's header background color.
  • Background Transparency.  Adjust the transparency level in the navigation (available only for the Fixed Menu. When the page is scrolled, the navigation reverts to solid to maintain a better level of navigation accessibility.)
  • Top Border & Bottom Border. Drag to set the width of the Top & Bottom borders of the header and click the color square to open the color picker for each element.

The Style Settings area in the Layout panel shows color squares that open a color picker, alignment buttons (left, center, right), sliders for Background Transparency and border width, and live preview of header colors on the canvas.

Changing the Navigation Header Settings

To modify the Navigation Header Settings:

  • Hover over the section and click the Settings button in the Navigation Header Menu to open Settings. Turn on or off the Hamburger, Fixed Menu or Fluid Container options:

The Settings panel displays three toggle switches labeled Hamburger, Fixed Menu, and Fluid Container; each can be turned on or off independently.

Please Note: For the Fixed Menu, the Background Transparency settings affect only the Header position at the top of the page. When the page is scrolled, the navigation reverts to solid to maintain a better level of navigation accessibility.

Please Note: The Navigation Header can only display a limited number of menu items in the main Menu (the exact number depends on menu item length, font size, and screen width). Even when the Hamburger toggle is off, very long menus may still collapse items on smaller screens.

Deleting the Navigation Header

  • Click the Delete button [Bin] in the Navigation Header Menu to remove the Navigation Header:

The Delete (bin/trash) button appears in the Navigation Header Menu toolbar alongside Layout and Settings.

Customizing the Navigation Header Elements

  • To customize the element, you can hover over it in the Layout settings and click Edit that appears on its right:

In the Layout panel element list, hovering over any element (Logo, Menu, Button, Social, or Slogan) reveals an Edit link on the right.

  • Or click the element and select the Edit button that appears on the top-right:

Clicking a header menu element on the live page canvas highlights it and shows an Edit button in a small control bar at the top-right corner of that element.

Customizing Menu Items

Please Note: The settings are not available for the Hamburger Menu.

Please Note: These settings control the appearance of menu links in the header (font, spacing, theme). They do not control which pages appear in the menu. Please refer to Adding a New Page for more details.

Change the font, padding, style, and format for the Menu items:

  • Font Size. Drag to set the font size for the Navigation Header.
  • Padding. Drag to set the padding size between the options in the Navigation Header:

The Menu settings dialog shows horizontal sliders for Font Size and Padding at the top of the panel.

  • Font. Select a font for the Navigation Header.
  • Style. Select one of the available styles in the drop-down. 
  • Format. Select from the drop-down of available ones: Default, Uppercase, Lowercase, Capitalize, or Small Caps:

Below the sliders, drop-down menus let you choose Font, Style, and Format (Default, Uppercase, Lowercase, Capitalize, or Small Caps).

  • Navigation Theme Style. Click to select a navigation theme from the box of available templates:

A grid of navigation theme thumbnails appears; click one to apply a preset menu style to the header.

  • Swap Submenu Colors. Turn on the toggle to swap the submenu colors:

A toggle switch labeled Swap Submenu Colors inverts the background and text colors of dropdown submenus.

  • Hide Homepage from Menu. Turn on the toggle to hide the Homepage item from the Menu:

A toggle switch labeled Hide Homepage from Menu removes the Home link from the visible navigation while the homepage remains accessible at the site root URL.

Customizing a Logo

Customize text, upload images, link your logo to the home page, and more. Please refer to the Logo article to learn more about available settings.

Logo editing menu is opened with IMAGE/TEXT tabs, upload area with CROP, ALT TEXT field, and ON CLICK LINK TO HOMEPAGE toggle

Customizing a Slogan

You can customize the following for your Slogan in the Website Builder:

  • Text. Specify the text to appear inside the slogan.
  • Font Size. Drag to set the font size for the slogan text.
  • Font. Select the font for the slogan text. 
  • Style. Select the style for the slogan text.
  • Format. Select the format for the slogan text: Default, Uppercase, Lowercase, Capitalize, Small Caps.
  • Link To. Choose to link the Slogan to a Page, Anchor, URL, File, Email Address, or Phone Number. 
  • Open the Link in the New Tab. Select this option to open the slogan link in a new tab.
  • Icons Settings. You can modify the Icons Settings at the bottom of the slogan dialog. Here, you can replace the icon, change the icon's color, and choose the icon's alignment.

SLOGAN editing menu with Label field, Font Size slider, Font/Style/Format controls, Icons Settings, and the top announcement bar in the preview

Customizing a Social Section

Website Builder allows you to customize the Social Buttons in the website Header. Follow the steps below to customize an element:

  • In the Social Buttons dialog, hover over the Social you want to modify, and click Edit on its right:

Header SOCIAL BUTTONS editing menu with drag-to-sort list, Edit/Delete controls per network, and ADD SOCIAL NETWORK button

Please refer to the Social Buttons article to learn more about available settings.

Customizing a Button

Website Builder allows you to customize a Button, its text, font, style and format, select letter spacing, button type, shape, border size, background color, link the Button to a page on this site, external URL, file, email address, or phone number, and more:

BUTTON editing menu with Text field, Link To drop-downs, Background color swatch, and Open Link in New Tab toggle

Please refer to the Button article to learn more about available settings.

Common Questions

How do I add pages to my website header (navigation menu)?

Navigation menu links (Pages, Anchors, Links) can be added in the Pages panel, not in Navigation Header settings. In the Site Editor, click Pages in the left sidebar, then click Add Page at the top of the Pages panel. For full step-by-step instructions and page type options, see Adding a New Page.

How do I hide a page from the website header (navigation menu)?

Hide pages from the header menu in the Pages panel, not in Navigation Header settings:

  • Open Pages in the left sidebar and drag the page from the Menu section down to the Hidden section.
  • Open Pages in the left sidebar, hover over the page and click the Settings icon (gear). Open the Pages tab and click Hide Page.

For more details, please refer to the Page Settings article.

I added a page but it doesn't show in the header. What went wrong?

The page is likely in the Hidden section of the Pages panel instead of Menu. New pages appear in the navigation menu by default, but if a page was moved to Hidden, it will not show in the header until you unhide it.

Why did my menu items move under a hamburger icon (☰)?

When the Navigation Header runs out of space, extra menu items are automatically placed under the hamburger menu. You can turn the hamburger on or off in Navigation Header Settings.

Related Articles