Navigation Header Settings in Mobile Editor

Table of Contents

Please Note: This article applies to Website, Website+Marketing, and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the Elements Management in Mobile Editor article.

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 header items can be the titles of page sections or external URLs.

Customizing the Navigation Header Layout

Tap on the Navigation Header to show the Navigation Header Menu, and tap the Layout button in the bottom 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 tapping 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 tapping Edit on its right:

  • Change the order by dragging and dropping the elements:

  • Delete elements by tapping the Remove [Bin] button:

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, tap 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, tap 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. Tap 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. Tap 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 tap the color square to open the color picker for each element.

Changing the Navigation Header Settings

To modify the Navigation Header Settings:

  • Locate the section and click the Settings button on 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.

Customizing the Navigation Header Elements

To customize the element, you can locate it in the Layout settings and click Edit that appears on the 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. Tap 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 Mobile Editor:

  • 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

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

  • In the Social Buttons dialog, locate the social you want to modify, and tap Edit on its right:

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

Customizing a Button

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

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