English Tiếng Việt
See demo Get started
Menu design

Desktop — hover and hover effects

You’ll find these settings at Configure › Display on desktop › For desktop only. This section only applies when shoppers view the web on a computer with a mouse. On phones, shoppers still tap as usual.

This section is available in the Tab Bar, Floating Button, Desktop Mega Menu and Mobile Menu. The Mobile Mega Menu and Icon Menu types don’t have it.

Open submenus on hover

In the Submenu (Level 2,3) card, choose whether shoppers open submenus by hovering or by clicking. The fields for sensitivity, how Tabs switch and the hover effect are right below it.

Open submenu on hover instead of click

  • When this is on, shoppers only need to move the mouse onto a level 1 item and its submenu opens by itself. When it’s off, shoppers have to click to open it.
  • When you create a new menu, this is off by default.
  • Turn it on if your store has many categories and you want shoppers to reach any of them by moving the mouse. If you’re worried that a shopper who just brushes past will get the menu opening and covering the screen, keep it off.

Hover sensitivity

  • This is a slider with 5 sensitivity levels. It only appears when you have turned on Open submenu on hover instead of click above. A lower level means the menu opens faster.
  • The 5 levels from fastest to slowest are: Instant · Sensitive · Default · Relaxed · Slow.
  • The default is Default, the middle level. Older menus that never had this setting changed also run at Default.
  • If shoppers brush past and the menu often opens by mistake, move the slider toward Relaxed or Slow. If you want it to open the moment the mouse touches it, move the slider to Instant.

Tab

This field only appears in the Desktop Mega Menu. It chooses how shoppers switch between the Tabs inside the menu panel. There are 3 options:

Option What shoppers do to switch Tabs
Follow submenu Follows the submenu setting above: if hover is on, hovering switches the Tab; if it’s off, shoppers have to click
Hover Moving the mouse onto a Tab switches it right away
Click Shoppers have to click a Tab to switch to it
  • A new menu defaults to Follow submenu.
  • For older menus that never had this setting changed, you’ll see the text “Not set yet”. In that case, Tabs laid out horizontally at the top switch on click, and Tabs laid out vertically on the side switch on hover. Just click one of the three buttons above, and the menu follows your new choice.
  • On touch screens, shoppers always tap to switch Tabs, whichever option you choose.

Change the hover effect on a menu item

The Hover effect card lets you choose how a menu item changes when a shopper puts the mouse pointer on it. Inside the card is a Preview frame. Move the mouse over the sample links to see the effect.

The effect only runs when shoppers view the menu on a computer (screens wider than the menu’s phone breakpoint), and only on items that have something to do: items with a real link, or items that can open a submenu. Group titles, empty space, dividers and items without a link stay still when hovered.

Hover effect

  • Where and what for: in the Configure step, click the Desktop chip, then scroll to the Hover effect card in the For desktop only block. This chooses how a level 1 item reacts when the shopper moves the mouse over it: change the background color or show an underline.
  • Options: Default (background) (changes the background) · Underline (underline). A new menu is preset to Default (background).
  • Applies to: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu, on every item that has a link or a submenu (both level 1 and sub-levels). Mobile Mega Menu and Icon Menu don’t have this field. Available on every plan.
  • What shoppers see when you change this field: choosing Default (background) makes the item’s background change when hovered, and the text lifts slightly. Choosing Underline removes the default background on hover (it becomes transparent) and replaces it with a line under the text. The two groups of fields below also change: you only see the fields for the option you chose.
  • Other platforms: exactly the same as Shopify, Wix and other websites.

Style Default (background) — change the background color

These three fields only appear when Hover effect is set to Default (background).

Field What it does Default
Background color The background color of the menu item when hovered Inherit — follows the menu’s color
Text color The text color when hovered Inherit — follows the menu’s color
Text animation How the text moves when hovered: Bounce up lifts the text slightly, Slide X slides the text sideways, None keeps it still Bounce up

Background color

  • Where and what for: the Hover effect card in the For desktop only block (Configure step, Desktop chip), the first field when Default (background) is selected. It sets the background color of the menu item when a shopper hovers over it.
  • Value: pick a color from the color picker or paste a color code. Empty by default (shows the word Inherit): in that case, Navi+ keeps its default hover background.
  • Shown only when: Hover effect = Default (background).
  • Applies to: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu; items with a link or a submenu. Every plan.
  • What shoppers see: the whole box of the item changes to the color you chose when hovered. If the item is a Card with a background image, the image stays and only the background color changes.
  • Other platforms: same as Shopify.

Text color

  • Where and what for: next to Background color, in the Hover effect card. It sets the text color of the item when a shopper hovers over it.
  • Value: pick a color. Empty by default (Inherit) keeps the text in its current color.
  • Shown only when: Hover effect = Default (background). (When Underline is selected, there is a separate Text color field. See below.)
  • Applies to: same as Background color.
  • What shoppers see: the text of the item changes color when hovered, and this overrides any text color you set for the individual item. Icons don’t change color with it.
  • Other platforms: same as Shopify.

Text animation

  • Where and what for: the row of buttons at the bottom of the Default (background) group. It chooses how the text moves when a shopper hovers over it.
  • Options: Bounce up (the text lifts slightly and returns to place) · Slide X (the text shifts sideways a little) · None (stays still). A new menu is preset to Bounce up.
  • Shown only when: Hover effect = Default (background).
  • Applies to: same as Background color.
  • What shoppers see: a very gentle movement of about 2px lasting around 0.2 seconds, so shoppers feel the text “respond” without it jumping. Choose None if you prefer a completely still menu.
  • Other platforms: same as Shopify.

Style Underline — show an underline

These four fields only appear when Hover effect is set to Underline.

Field What it does Default
Line color The color of the underline Inherit — follows the menu’s color
Thickness The thickness of the underline, in px 1
Text color The text color when hovered Inherit — follows the menu’s color
Animation How the underline appears: None shows it at once, L → R runs from left to right, Fade fades it in, Center expands from the center to both sides None

Line color

  • Where and what for: the Hover effect card in the For desktop only block, the first field when Underline is selected. It sets the color of the underline.
  • Value: pick a color. Empty by default (Inherit) makes the underline use the item’s current text color.
  • Shown only when: Hover effect = Underline.
  • Applies to: Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu; items with a link or a submenu. Every plan.
  • What shoppers see: the underline sits right under the text (not stretched across the whole item box), a few px below the text.
  • Other platforms: same as Shopify.

Thickness

  • Where and what for: the middle field in the Underline group. It sets the thickness of the underline.
  • Unit: px, enter a whole number (for example 2). The default is 1. If you leave it empty or enter something that isn’t a number, 1 is used.
  • Shown only when: Hover effect = Underline.
  • Applies to: same as Line color.
  • What shoppers see: the larger the number, the thicker the line. If the line is too thick it looks heavy, so try it in the card’s Preview frame before choosing.
  • Other platforms: same as Shopify.

Text color

  • Where and what for: the third field in the Underline group. It sets the text color when a shopper moves the mouse over the item.
  • Value: pick a color. Empty by default (Inherit) keeps the text in its old color.
  • Shown only when: Hover effect = Underline. (This is a separate field and does not share its value with the Text color field of the Default (background) style.)
  • Applies to: same as Line color.
  • What shoppers see: the text changes color at the same moment the underline appears, and this overrides any text color you set for the individual item.
  • Other platforms: same as Shopify.

Animation

  • Where and what for: the row of buttons at the bottom of the Underline group. It chooses how the underline appears.
  • Options: None (shows at once, no movement) · L → R (runs from left to right) · Fade (fades in) · Center (expands from the center). A new menu is preset to None.
  • Shown only when: Hover effect = Underline.
  • Applies to: same as Line color.
  • What shoppers see: L → R and Center take about 0.25 seconds, and Fade fades in over about 0.5 seconds. When a shopper hovers over a sub-item, only that sub-item gets the underline; the parent item doesn’t get an extra line.
  • Other platforms: same as Shopify.

Quick summary of the settings

Field in the app Menu types Default
Open submenu on hover instead of click Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu Off
Hover sensitivity The 4 menu types above, shown after hover-to-open is turned on Default
Tab Desktop Mega Menu Follow submenu
Hover effect Tab Bar, Floating Button, Desktop Mega Menu, Mobile Menu Default (background)

These settings are exactly the same on Shopify, Wix and every other web platform. All plans have full access, and no field is locked.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.