Step 2: Add & Design > Style
All settings in this section apply globally to all menu items.
*Available in Premium plan only.
There are 4 animations to appear submenu: fade in, shift up, flip in, zoom in.
Note: select "none" if there is any error when appearing submenu.
Select to open menu on click or hover.
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.
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.
Adjust the color of submenu to fit your store.
These colors apply globally to all submenu items.
Note: the hover color of menu items depends on your theme's style.
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're using CSS selector
to add menu.
Step 2: Add & Design > Advanced:
*This section is only available if using "CSS selector - advanced option" to add menu.
By default, Smart Menu's width depends on the width of your old menu (theme's menu).
Enable this function can make Smart Menu expand larger (depends on theme's container).
Enable this in case your menu is too long.
Adjust this height to make Smart Menu fit the header on your store.
Align the top menu to left / right / center of the menu bar.
Our app supports Google Fonts
. Type a font name in "Font family" to search for a font that fits your theme.
Leave the font family blank if you want to use theme's default font.
Pick a color you want to change for menu bar and top menu (level 0).
Leave it blank if you want to use default color from Skin.