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. The navigation header is automatically updated when you add a new page to your website.  
  • For single-pager websites, the navigation menu items can be the titles of page sections or external URLs.
  • Hover over the desired section, and click the Add Section:

  • Choose the section from the modal that appears:

  • The new Navigation Menu section will immediately appear. You can now modify the Navigation Menu section to suit your needs.
  • 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.

Hover over the section and click the Layout button in the top-right to open the toolbar:

Top Section

Switch to the top section. Initially, this section is empty and appear on the site after you add elements:

  • To add an element, click the Add Element button, and select among Slogan, Social Buttons, and Button.
  • The selected element(s) will immediately appear in the top-bar. If you remove the last item, the top-bar disappears automatically.

Main Section

  • Add Header elements by clicking the Add Feature button. (Logo, Navigation Menu, Button, Shopping Cart or Social Buttons). 

  • The selected element will immediately appear.

Please Note: You can add up to two Buttons to each Header section. All other features (Logo, Menu, Social Buttons, Slogan) are limited to one per section. A Slogan can be added either to the Top-bar or the Sub-header.

  • Edit each element by hovering over and clicking Edit:

  • Change the order by dragging and dropping the elements:

  • Delete elements by hovering over and clicking Delete [x].

Sub-header Section

Switch to the sub-header section. Initially, this section is empty and appear on the site after you add elements:

  • To add an element, click the Add Element to add Navigation Menu, Button, or Social Buttons.
  • The selected element(s) will immediately appear in the sub-header. If you remove the last item, the sub-header disappears automatically.

The Design tab of the Layout Settings toolbar allows you to change the following:

  • 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.)

  • Item Color. Click the square to open the color picker and select the default color for the Navigation Menu 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 the navigation menu to the right, left, or place it in the center.
  • 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 Settings of the Menu Section

You can have up to 4 Navigation Menu elements in any Header. There must be at least one element in a Header. To modify the Menu Block Settings:

  • Hover over the section and click the Settings button in the top-right sidebar to open the Settings toolbar. Turn on or off the Hamburger or Fixed Menu 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.

Customizing the Navigation Menu Elements

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

Change the font, padding, style, and format for the Navigation Menu items. Hover over the Navigation Menu, click Edit on the top-right, and customize:

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

  • Font. Select a font for the Navigation Menu.
  • 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 sub-menu colors:

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

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.

  • In the Layout Settings dialog, hover over the Top-bar section and select the Slogan.
  • Click Edit on the top-right, and customize:
  1. Text. Specify the text to appear inside the Slogan:
  2. Font Size. Drag to set the font size for the Slogan text:
  3. Font. Select the font for the Logo text. 
  4. Style. Select the style for the Logo text.
  5. Format. Select the format for the slogan text: Default, Uppercase, Lowercase, Capitalize, Small Caps:
  6. Link To. Choose to link the Slogan to a Page, Anchor, URL, File, Email Address, or Phone Number. 
  7. Open the Link In The New Tab. Select this option to open the Slogan link in a new tab.
  8. 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.

Site Editor allows you to customize the Social Buttons in the website Header. Follow the steps below to customize a feature:

  • In the Layout Settings dialog, hover over the Social Buttons and click Edit on its right:

Site Editor 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. 

Hover over the Button and click Edit in its-top-right and be able to customize:

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