Mega menu
Learn to elevate your store navigation with a seamless and user-friendly mega menu created with FoxKit
A mega menu is an expanded and visually appealing menu that displays multiple navigation options and subcategories in a single dropdown panel.
A well-designed mega menu simplifies the browsing process for your customers.
It provides a clear overview of your store's product categories and subcategories, allowing users to quickly find what they want.
It reduces the number of clicks required to navigate through your site, enhancing user satisfaction and encouraging exploration of your product offerings.
Create a mega menu
Steps:
In FoxKit > FoxKit power > choose Mega menu
Select Create menu
Give your menu a name and select the layout for it.
You can choose 1 of the 2 layout options for your mega menu. It can be:
Horizontal menu: In a horizontal mega menu, the parent menu items stand at the top; and sub-items, or child menu items, spread out underneath them.
Vertical menu: In a vertical mega menu, the parent menu items stand on the left side; and sub-items, or child menu items, branch out from them to the right.
Each submenu item can be chosen as:
Pure text link: Link the item to a certain collection, product, landing page, etc.
Text link with image banner: A menu banner can attract customers' attention and communicate your messages more effectively.
General
Title: Insert your menu item label;
Link: paste the page URL or select a page from your Shopify store that you want to link the menu item with, or simply leave it blank.
Include the full URL of that page, including the URL's HTTPS protocol.
Check the option Open link in a new tab if needed.
Submenu settings
Determine your Submenu layout as Mega/Dropdown;
Select how the submenu is opened: by hovering/clicking;
Select the Dropdown container width: Full width/ Auto width;
Enable to show content in the container if needed;
Set the number of submenu columns: 1-6 columns or based on the number of submenu items being added to the menu item.
Icon & Badge
You can set the Icon and Badge for each menu item to attract customers or visitors' attention.
Icon
The Icon will be positioned beside the menu item label.
Select your preferred icon in the Select icon field.
Then, adjust the Icon size to fit the menu item (10px-50px) and change the Icon color.
Badge
The Badge will be positioned next to the menu item label.
Enable/Disable the Badge by toggling the Show badge option.
Insert the content you want in the Badge label to show on the menu item.
Then, you can also adjust the suitable Badge background color and Badge text color to highlight it.
Visibility
Select in what view that menu item and submenu items are displayed.
Style your mega menu
To change the styling of the mega menu, choose Appearance.
Some details of the mega menu that you can change are:
Menu layout
Horizontal
Vertical
Menu width
Fill container
Fixed width
Menu bar background: Change color
Menu text color
Menu text hover color
Space between items
Submenu design
Background: Change color
Text: Change color
Text hover: Change color
Change the settings of your mega menu
Title
Render method - we recommend you don't change this option if you're not sure what it does
Custom element
Replace by selectors
Need help in adding the mega menu to your theme? Don't hesitate to drop us a message via our in-app live chat 💬
Last updated