Style & Advanced settings

Style & Advanced settings


1. Style

Step 2: Add & Design > Style



All settings in this section apply globally to all menu items.


Animation

*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. 


Trigger

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.


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.


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.


2. Advanced:

Step 2: Add & Design > Advanced:
*This section is only available if using "CSS selector - advanced option" to add menu.



Enable submenu full width

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).

Display top menu in multiple line

Enable this in case your menu is too long.
Example:
Disabled:


Enabled:



Adjust this 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 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.


Top menu & Menu bar color

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.

    • Related Articles

    • Frequently Asked Questions for Smart Menu

      What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...

    • How to show Smart Menu on your store

      After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced with Smart Menu. There are 2 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify or Manual - Replace menu by CSS selector. ...

    • How to uninstall Smart Menu completely?

      UPDATE (30.11.2023): With users installing our app after November 30, 2023, the app does not add any code or store any file in the theme anymore. Therefore, you don't need to delete anything after uninstalling the app. When installing, Smart Menu ...

    • Why is my Smart Menu not showing up or showing incorrectly?

      There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...

    • Submenu settings

      There are 3 types of Submenu: Flyout (tree) menu, Mega menu & Tab menu. Click the pencil button to edit a parent item and choose among the 3 types.   1. Flyout menu settings When selecting Flyout Submenu type, your menu will be displayed as a normal ...