Commands in the Hamburger Menu section

Step 4 - Pages > Menu Object >

Commands in the Hamburger Menu section

Previous pageReturn to chapter overviewNext page

When there isn't enough space to display all the items in the main menu, this is automatically replaced by the Hamburger button. This also happens if you did not choose to create a responsive website (in Resolutions and Responsive Design).

If the Menu object is inserted in the template editor, the available space depends on the size of the object itself. If, on the other hand, the Menu object is inserted in a page, the amount of space is determined by the size of the cell in the page layout table.

Regardless of the space available for the Menu, you can choose to always use the Hamburger Button by activating the Always display the Hamburger Button option in the Main section.

The Hamburger Button is square, and its height and style are defined using the options in the Main section.

Click on this button to open the pop-up hamburger menu, which shows the first-level items of the main menu.

Click to expand/collapse

You can use the options in the View section to define the style of the hamburger menu:

Opening: this specifies whether the menu opens on the right or the left when the hamburger button is clicked.
Effect: this specifies the effect with which the menu is displayed.
Time: defines the speed with which the Menu appears upon clicking the Hamburger Button.
Show Level Menu on mouseover: you can decide whether to display the level menu entries on mouseover or on click.

The hamburger menu is displayed on top of the page so you can define some options for the Content overlay style:

Background color: this specifies the color of the hamburger menu's background. This color is semi-transparent (taking the value of the Opacity option) and it creates a filter to dim the page underneath.
Opacity: this specifies the level of transparency of the hamburger menu's background color. Values closer to 0 increase transparency, letting the page's contents show through.

The options for the Button style 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: this sets the value (in pixels) of the space between each button (outer margin).

The button width must take into account the overall space available for the menu: this parameter can be changed if you are not using a default graphic template (see Template Structure).

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 define the appearance of the single elements in the hamburger menu. First, select the Menu item to work on: Background, Menu Item, Item on mouseover, Separator and Separation line.

The options in the Style section depend on which element was selected. The possible options are:

Background color / Text color: these define the color for the background, the text of the items in their various states, the menu separator and the Separation line.
Border: this defines the color, thickness and shadow of the background borders (as a whole or singularly).
Button text: this applies a text style (Normal, Bold, Italics or Underlined) to the Item on mouseover or Separator. This style is in addition to the settings in the Button text section.
Width: this is only available for the Separation line and it sets the width of the line as a percentage of the width of the hamburger menu.


Read the guides:


How to use the Menu Object