1. Style

All settings in this section apply to all menu items.

Animation

Available in Premium plan only.

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.

On mobile, Smart Menu applies theme's default style. These color options don't work on mobile menu.

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.
If you do not select any font (leave the font option blank), the menu will automatically apply the theme's font on the storefront.

Top menu & Menu bar color

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

Updated on: 26/02/2025