Adjust Menu Appearance

If you’re familiar with Elementor, you will find out adjusting menu appearance is easy. Just switch to relevant preview mode and try things out, everything is live!

Table of Content

1. 1. Content tab
   1. 1.1. General section
   2. 1.2. Desktop Menu section
   3. 1.3. Mobile Menu section
   4. 1.4. Toggle Button section
   5. 1.5. Close Button section
2. 2. Style tab
   1. 2.1. Desktop Menu section
   2. 2.2. Mobile Menu section
   3. 2.3. Toggle Button section
   4. 2.4. Close Button section
   5. 2.5. Off-Canvas & Overlay section
3. 3. Advanced tab

Once you have dragged-and-dropped the “Elemental Menu” widget into a column or a section, your screen may look like this:

On the left side is Elemental Menu control panel. There’re tabs, sections and controls which allow you to adjust menu appearance however you want. Let’s get down to the details:

1. Content tab

The “Content” tab contains sections with controls which allow you to control how things should be rendered and behave.

1.1. General section

1. Menu: Select the menu you want to display.
2. Hide Button Outline: Enable to hide the “blue” border around an active button. Enable this may cause accessibility issue for keyboard users.
3. Disable Double Rendering: By default, two separate menus will be rendered: one for Desktop and one for Tablet & Mobile. If this option enabled, only one menu will be rendered based on real users’ device instead of the viewport width. For more info, you may read this article.

1.2. Desktop Menu section

1. Layout: Select the layout you want to display the menu.
2. Horizontal Scrolling: Enable this option and hide the Mobile Menu will result in a scrollable horizontal menu on Mobile. Something like this.
3. Top-Level Items Align: Alignment of the top-level menu items.
4. Top-Level Items Layout: How icon, title and the submenu indicator will be laid out? Horizontally or vertically.
5. Pointer: Select a pointer style when an interaction happens.
6. Pointer Animation: Animation style of the pointer an interaction happens.
7. Submenu Indicator: Shape of the submenu indicator.
8. Toggle Submenu On Click: Whether to show a submenu on click instead of hovering.
9. Show Submenu On Intent Hover: Whether to show a submenu on intensive hovering or not.
10. Highlight Current Menu Item: Whether to highlight the current menu item or not.
11. Submenu Animation: Animation style of the submenu.
12. Submenu Animation Duration: Animation duration of the submenu animation.

1.3. Mobile Menu section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

There’re a few things you might not understand:

1. Breakpoint == None: When you set “Breakpoint” to “None”, Mobile Menu will be displayed on every screen. This is really helpful when you want to display a Mobile Menu on Desktop.
2. Default Heading Type: The content type of the default heading of the paged menu header. This control is available if “Paged” layout selected.
3. Disable Auto-Toggle: By default, when you touch on any place on the screen, an expanded submenu will be collapsed automatically. To stop that behavior, just enable this control.
4. Disable Auto-Focus: By default, an overflow submenu will be scrolled into view automatically. If “Auto-Focus” disabled, users have to manually scroll to view the overflow part:

Auto-Focus Enabled

Auto-Focus Disabled

1.4. Toggle Button section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

In case you want to use a custom Toggle, just set the “Layout” to “Custom” and enter the correct CSS selector of the custom Toggle.

1.5. Close Button section

This section will show up when enable “Show Close Button” in the Mobile Menu section.

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

2. Style tab

The “Style” tab contains sections with controls which allow you to decide how the menu will look like by adjusting Typography, Colors, Padding…

2.1. Desktop Menu section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

2.2. Mobile Menu section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

2.3. Toggle Button section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

2.4. Close Button section

This section will show up when enable “Show Close Button” in the Mobile Menu section.

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

2.5. Off-Canvas & Overlay section

The controls are descriptive and every control is live. If you’re unsure, try it out to see how things work.

3. Advanced tab

This tab contains default advanced controls of Elementor and Elementor Pro. The plugin does not add any controls to this tab.