The Menu Element.

How to add a menu element onto your website.

Webydo Support avatar
Written by Webydo Support
Updated over a week ago

Pages & Navigation works directly with the Menu element. Every page created in your site, is automatically added to a menu.

To place a menu element on your page, click and drag your desired menu from the elements panel onto the canvas. 

When you place a Menu element on the page, it already displays all the pages within that menu. The menu will not display any pages that are set as hidden in the Pages and Navigation settings. 

Click and drag your menu to change the size of your tabs. They will grow or shrink based on the size of the element. 

All design changes can be done in the Properties Panel.

If you'd like to display a different menu (not the default Top Menu) Choose the menu you would like displayed from the dropdown "Select Menu:"

EDITING THE DESIGN OF YOUR MENU

All design changes should be made in your Properties Panel. The design options are divided into sections:

Font Style

The font displayed is based on your preset Paragraph Styles. To create a new style click on the settings icon next to the "Font Style" dropdown. 

The size and colors of the text can be edited directly in the panel. As well as the weight of the font. 

Tabs Background

Here you are able to edit the background for your buttons. 

You are able to set a background color, as well as add images to the background. 

Use the Image Fitting and Image Position dropdowns to edit how the images fit within your menu tabs. 

Tabs & Text Alignment

By default, all tabs in your menu will be the same width. If you would like the width to be based on the page name length, uncheck the box below:

To edit the space between tabs use the Margin settings. 

To edit the placement of the text and space between the text and the border of your tab use the Text Alignment and Text Padding settings.

If you would like to change the direction of your menu from Left to Right or Right to Left, use the "Menu Direction" setting. 

Tabs Border

To edit the border color and size, use the following settings. 

You can also choose a different color for Hover. 

Icons

Here you can turn on or off the Icons and Text from your menu. 

You are also able to edit the size, position and padding of the icons in the menu. 

Animation

There are currently 20 animations to choose from. Use the dropdown to select the animation you would like to use, and customize it by color and size. 

You can preview your effect directly in the studio by hovering over the menu. 

Did this answer your question?