Menu

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:

  • Hover over the left sidebar of the Site Editor and click Build:

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

  • Drag and drop the selected 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 top-right sidebar 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 appear 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 appear 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:

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

  • ItemColor. Click the color square to open the color picker and select the default color for the NavigationMenu items (the ItemColor settings are also applied to the Logo Color settings).
  • HoverColor. 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:

  • Hover over the block, 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

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:

  • Hover over the Logo in the Header, and click the Edit button that appears on its top-right:

  • Alternatively, in the LayoutSettings dialog (available only for the Header Section), hover over the Logo and click the Edit button that appears:

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

Image Logo

  • Add a logo image by Drag & Drop, Upload from your computer, 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, hover over the Social Buttons and 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:

  • Hover over Social Button and click the Edit button that appears:

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

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

Hover over the Button and 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, EmailAddress, or PhoneNumber:

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

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

  • Font Size. Drag to set the font size 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 LayoutSettings 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:

FontSize. 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, EmailAddress, or PhoneNumber. 

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

Related Articles