1. Style

All settings in this section apply to all menu items.

Animation

There are 4 animations to appear submenu:

• Fade in
• Fhift up
• Flip in
• Zoom in.

Trigger

Select the trigger to open menu: Hover, Hover Intent, Click

If you want to open menu when hover, recommend to select "Hover intent" option.

Hover intent waits until the user's mouse slows down enough before taking action. Particularly:

• Hover Intent will stop sub menus appearing immediately if the user accidentally moves their mouse over a top level menu item. The user must “intend” to open the sub menu by holding their cursor over the menu item for a few milliseconds.
• Hover Intent will also stop the sub menu from being hidden immediately if the user accidentally moves their cursor away from the sub menu – the user will have a small window of time to place their cursor back over the sub menu and keep it visible.

Show indicator

Indicator is the down arrow ﹀, appears next to a top menu having submenu.

It is recommended to enable it if your top menu item is attached a link, because if an user clicks on the text of a menu, it directs to the attached link before open submenu, so you need an indicator for user to click to show the drop-down submenu.

Submenu Color options

Adjust the color of submenu to fit your store.

These colors apply to all submenu items.

Colors of top menu and menu bar can only be changed if you use CSS selector method to add menu.

2. Advanced

This section is only available if you use "CSS selector - advanced option" to add menu.

Enable submenu full width

By default, Smart Menu's width depends on the width of your theme's menu.

Enable this option can make Smart Menu expand larger (depends on the theme menu's container).

Display top menu in multiple line

When you enable this option, the menu will automatically adjust based on the menu container's width.

If there is not enough width, it will automatically display in multiple lines.

If you disable this option, the menu will always display in one line, no matter how the menu container's width is.

Example: the red mark is the menu container's width

• Disabled: the menu only displays in one line and is not wrapped inside the menu container's width

• Enabled: the menu automatically display in multiple lines to fit inside the menu container's width.

Menu bar height

Adjust the menu bar's height to make Smart Menu fit the header on your store

Align menu

Align the top menu to left / right / center of the menu bar.

Font

Our app uses the font from Google Fonts.

You can type a font name in "Font family" to search for a font.

Top menu & Menu bar color

Change the colors for menu bar and top menu (aka. menu level 0)

Updated on: 26/02/2025