Navigation Header

Table of Contents

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.

Adding a Navigation Header

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

  • Choose the section from the modal that appears:

  • 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 header to display the Resizing Control at the bottom of the section:

  • Click and drag the Resizing Control 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 to the desired place:

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 to 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 selected element will immediately appear.

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:

  • Change the order by dragging and dropping the elements:

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

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.

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 the 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.

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.

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:

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.

Deleting the Navigation Header

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

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:

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

Customizing Menu Items

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

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:

  • 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:

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

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

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

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.

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.

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:

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:

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