Navigation Menu Settings in Mobile Editor

The Menu section on your website will provide visitors with the essentials, such as a business logo, navigation links, contact information, a shopping cart, etc.

To help visitors navigate your website, you can change a homepage, hide and rename menu items, make sub-items, and more.

For websites with multiple pages, menu items are the page names. The Menu is automatically updated when you add a new page to your website.

For one-pager websites, the menu items can be the titles of page sections or external URLs.

Follow the instructions to select a Navigation Menu block for your website.

To add the feature:

In the Mobile Editor, click Build at the bottom:

Switch to the Blocks tab and click Menu at the top of the list. In the panel that appears, select a template you would like to use as a header for your website:

Click Menu block onto the Navigation Menu placeholder (located at the very top of the screen):

The new Header will immediately replace the old one (if there's any).

You can now resize the Navigation Menu block and modify its look and feel to suit your needs.

Resizing the Menu Block

Hover over it to display the Resizing Control at the bottom of the block:

Click the Resizing Control, then drag it to modify the height of the Header. The Resizing Control displays the padding height on either side of the block, upper or lower:

Changing the Layout Settings of the Menu Block

Hover over the block, and click the Layout button in the bottom toolbar to open the Layout toolbar:

Layout Tab

Proceed to the Layout tab. The tab has 3 sections: Top-bar, Header, and Subheader (the Header section opens by default):

Header Section

Add Header elements by clicking the Add Feature button (Logo, Navigation Menu, Button, 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].

Top-bar Section

Switch to the Top-bar section. Initially, this section is empty and appears on the site after you add Features:

To add an element, click the Add Feature 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.

Sub-header Section

Switch to the Sub-header section. Initially, this section is empty and appears on the site after you add Features:

To add an element, click the Add Feature button to add Button(s).
The selected element(s) will immediately appear in the Sub-header.

If you remove the last item, the Sub-header disappears automatically.

Design Tab

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. Use the slider to change the transparency level in the navigation.

Please Note: Background Transparency is only available when Fixed Menu is enabled. When the page is scrolled, the navigation reverts to solid to maintain a better level of navigation accessibility.

Item Color. Click the color 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. Click the color square to open the color picker and select the color for the Hover Menu options (this color lets you know which page you're hovering over with the mouse cursor).

Alignment. Align the Navigation Menu to the right, left, or place it in the center of the allotted header space.

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 Block

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:

Click the Settings button in the bottom toolbar 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

Customizing a Logo

In the Site Editor, you can customize a Logo text or upload a Logo image, link your Logo to the home page, and more.

Follow the steps below to customize a Logo:

Click the Edit button that appears on its top-right:

Proceed to the Logo settings to select the Type of the Logo: Image or Text.

Image Logo

Add a logo image by Upload from your smartphone, or add from My Photos or Clouds, or use Free Photos:

The image will immediately appear in the Header:

Text Logo

Switch to the Text type to be able to modify:

Name. Add the text to this field.
Font Size. Drag to set the font size.
Font. Select the font for the Logo text.
Style. Select the style for the Logo text: Light, Light Italic, Regular, Regular Italic, Bold, or Bold Italic.
Format. Select a format for the Text Logo from the drop-down of available ones: Default, Uppercase, Lowercase, Capitalize, or Small Caps.
On Click Link To Homepage: select to redirect your visitors to the Home Page when they click the Logo in the Header.

Customizing a Navigation Menu

Site Editor allows you to customize the Navigation Menu section: change the font, padding, style, and format for the 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:

Customizing a Social Section

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, click Edit on its right:

You can rearrange Social Buttons in the website Header by drag-and-drop.

To add a network to the Social Buttons, click Add Social Network:

In the Add Social Button pop-up, click the social Button you would like to add to the website header:

The selected Social Button will immediately appear both in the Header and in the Social Buttons dialog:

To connect the Social Button to a social network account:

Click the Edit button that appears:

Enter the profile name or link into the Link field that appears:

Open the Link In The New Tab. Select to open the social network account in a new tab.

Customizing a Button

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.

Click Edit in its-top-right and be able to customize:

Text. Specify the text to appear in the Button:

Link To. Choose to link the Button to a Page, Anchor, URL, File, Email Address, or Phone Number:

Background. Click the square to open the color picker and select the color:

Type. Select the button type from the list: Primary Solid, Secondary Solid, Primary Outline, Secondary Outline, or Text.
Button Shape. Switch between the available button shapes:

Border Size. Drag to set the border size for the outline of the Button.

Please Note: The Border Size control is enabled only for the Primary Outline or Secondary Outline button type.

Hover Effects. Switch the toggle to apply the effect and choose the Hover Animation in the drop-down (Fade Out, Scale, Shine, Shadow, Glow, Uplift):

Font Size. Drag to set the font size for the Button text:

Letter Spacing. Drag to set the letter spacing for the button text.

Font. Select a font for the button text.
Style. Select the style for the button text in the drop-down.
Format. Select the format for the button text: Default, Uppercase, Lowercase, Capitalize, Small Caps.

Icon. Add an Icon, and change its Color and Alignment.

Customizing a Slogan

Site Editor allows you to customize the Slogan text, font, style, and format, link the Slogan to a page on this site, external URL, file, email address, or phone number, and more.

Follow the steps below to customize a Slogan:

In the Layout Settings dialog, hover over the Top-bar section, and select the Slogan.
Click Edit on the top-right, and customize:

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 Logo text.
Style. Select the style for the Logo 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.