Commands in the Main section

Step 4 - Pages > Menu Object >

Commands in the Main section

Previous pageReturn to chapter overviewNext page

You can use these commands for give some general settings for the main menu.

First of all, you have to indicate which level is to be used to create the menu: go to the sitemap and select the required level. The various items at this level will be used as items in the menu. When you have done this, you can select the options in the View box to work on:

Main menu alignment / Hamburger Button alignment: these two options respectively define how the menu and hamburger button are aligned (Left, Center or Right), with respect to the space available for the Menu object. If the Menu object has been inserted in the template editor, the available space depends in the size of the object. If, on the other hand, the Menu object has been inserted in a page, the available space is determined by the size of the cell in the page layout table that it has been added to.

When there isn't enough space to display all the items, the menu is automatically replaced by the hamburger button. This also happens when the website is not responsive (indicated in Resolutions and Responsive Design). Remember, therefore, that the hamburger button can be used in desktop websites as an alternative to the traditional navigation menu.

Always display the Hamburger Button: this allows the Hamburger Button to always be displayed instead of the main Navigation Menu, regardless of whether the available space is large enough to accommodate the expanded view of all the options.

The options in the Button style section are:

Width: you can set the width in pixels of the buttons for the menu items.
Margin: you can specify the horizontal and vertical margins in pixels (the space between the button border and the text in the button).
Spacing: you can specify the outer margin in pixels (the space between each button).

When you define the width of the buttons, take into account the overall space available for this menu: this parameter can be changed if you are not using a default template (see Template Structure.

Border: use this option to indicate the border thickness and corner bevel of the buttons. You can define each button individually.

The options in the Button text section are:

Font Type: specifies the font, style and size to use for the text.
Alignment: you can specify how you want the text to be aligned in the button: to the Left, in the Center or to the Right.

You can now define the appearance of the single items in the main menu. First of all, select the Menu item you want to work on: Background, Menu Item, Item on mouseover, Item for Current Page, Separator.

The following options are available in the Style section, depending on which menu item you have selected:

Background color / Text color: define colors for the Background, the various states of the Menu Options, the Menu Separator, and the Hamburger Button.
Opacity: this sets the level of transparency of the menu object's background color. Values closer to 0 increase transparency, letting the page's background show through.
Border: this defines the color, thickness and bevel of the corners of the background border (all 4 corners or singularly). If you are working on the menu items in their various states, you can only define the border color: thickness and bevel values are taken from the parameters given in the Button style box.
Margin: this sets the value (in pixels) of the buttons' external horizontal and vertical margins. The margin determines the size of the menu's background.
Background image: you can specify the image to use as a background for the button. Click on the to browse through the available files (in .JPG, .GIF or .PNG format) to select an image. Or click on the arrow next to the field to open the button library and select the image you want to use from there.
Use the same settings as the Mouseover state / Use the same settings as the Menu Item: available, respectively, for the Item for Current Page and Hamburger Button elements, allow the use of the same options defined for the Item on mouseover or the Menu Item; otherwise these two elements can have different settings.
Effect: this option is only available for the Item on mouseover: it indicates the effect on the button on mouseover
Button text: this option applies a text style to the selected menu item or menu separator: Normal, Bold, Italics or Underlined. This style is in addition to the definitions given in the Button text box.

 


Read the guides:

-

How to use the Menu Object