Create a Website

The Menu Widget

You can place the Menu widget anywhere on the page. Moreover, you can create several menus. Set a service name for each menu to be displayed in the list (1), add a new one by clicking on the "+" icon (2), and then choose the one you need from the list (3) after adding the widget on the page.

How Do I Create and Сonfigure a Menu Item?

In the menu settings, click Add menu link and choose a menu type:

  • A link allows you to set a link to a menu item that leads to a web address or page (you can open it in the same window or in a new one), an anchor page, pop-up window, phone number, email, or leave the item without a link.
  • A drop-down menu allows you to create an empty item without a link.

If you click on the "..." icon, the following settings will open:

  • Change the title
  • Replace link
  • Hide
  • Remove

Note:

If you remove the main item, all its nested items will remain on the list.

To change the menu item order, drag the item vertically to the desired place on the left panel. By dragging the item to the right, you can nest it under another one. You can create three levels of a menu.

Menu Design

To edit the menu design, click on the widget and then on the "droplet" icon in the settings above it.

The following settings are available:

  • Logo: enable a logo and site name, for example, to change the header of your website.
  • Design: create up to 5 custom designs.
  • Alignment: align items inside the menu block.
  • When line is full: set the display of items that overflow the line by nesting in a drop-down list or moving to the next line.
  • Add a class for a widget.

Menu Design Settings

You can customize the design of the main and nested items. To do that, click on the "pencil" icon to go to the settings. You can change styles, text formatting, and paddings.

In the Text formatting settings, you can choose the text size of the item, and in Paddings, you can adjust paddings between menu items, as well as the top and bottom paddings.

In the Styles settings for the main items, you can:

  • Select the text color of the text in the common state.
  • Select the text color of the active item and its display, i.e. the color of the item that is currently open on the page and when mousing over it. When selected, the active item can change its color, background, or be underlined.

For the nested items the same Text formatting and Paddings settings are available.

In the Style settings, you can choose the text color of the main and active item, as well as overlay and opacity of the drop-down menu background.

Was this article helpful?
The article hasn't been rated yet.