Megamog
Try Megamog freeResourcesOther solutions
  • What is Megamog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Megamog theme
      • Install Megamog in 1-click fast way
      • Install Megamog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Purchase code & activation
    • Update Megamog theme
    • FoxHome
  • Build for success series
    • Product page for Beauty store like Kylie Jenner 🔥
    • Landing page for Fashion store like Bremont
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Collapsible content
    • Collection spotlight
    • Collection list
    • Collection links
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Google Maps
    • Image banner
    • Image with text
    • Instagram
    • Lookbook
    • Newsletter
    • Press
    • Product tabs
    • Recently viewed products
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
    • Banner grid
    • Multiple columns
    • Store locator
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animation
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Corner radius
    • Currency format
    • GDPR settings
    • Intergrated apps
    • Integration
    • Pop-up & drawer
    • Product card
    • Product options design
    • Product options swatches
    • Social sharing
    • Search settings
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommedations
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
  • FAQS
    • Add a gift wrap option to my cart
    • Add custom badges to my product card
    • Add recipient fields to my gift card product
    • Add/ Remove Social icons in footer
    • Change the default product order in collection
    • Customize search results
    • Move the collection description to under the product listing
    • Remove the tax-included information in product page
    • Set up local pickup
    • Show Payment icons on the Footer
  • TROUBLESHOOTING
    • Contact form submissions not found
    • Translation apps incompatibility
Powered by GitBook
On this page
  • How to create a Mega menu in FoxKit app
  • Create Menu
  • Add and customize your Menu items and Submenu items
  • Menu item settings
  • Submenu item settings
  • Menu Appearance settings
  • Add the Mega menu to the Megamog theme
  • Add mega menu for desktop view
  • Add mega menu for mobile view
  1. Getting started

Mega menu

Learn how to add menus to build your store's navigation

PreviousIntegrate Shopify Review appsNextPurchase code & activation

Last updated 4 months ago

A mega menu is a drop-down menu in which the top-level item has 2 levels of nested drop-down menus.

A mega menu affects how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content.

Different websites require different kinds of menus, depending on the size, nature, and objectives of your store. This article shows you how to create and customize your own suitable menu.

This article shows you how to create and add your Mega menu to Megamog theme.

Steps:

  1. Create a Mega menu in FoxKit app

  2. Add your Mega menu to the theme

  3. Save

How to create a Mega menu in FoxKit app

Create Menu

  1. Go to Apps > FoxKit Sales Boost app.

  2. Select Mega menus feature > Create menu.

  3. Give your new menu a title and select the Menu layout (Horizontal/Vertical). Then, click Create menu.

Add and customize your Menu items and Submenu items

Menu item settings

General

  • Title: Insert your menu item label;

  • Link: paste the page URL 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 settings

You can add an icon and/or a badge to your menu item.

Visibility

Select in what view that menu item and submenu items are displayed.

Submenu item settings

Once you have added your menu item, you can add submenu items to it.

Submenu item as Text link

  • Give your submenu item a label;

  • and Insert the link to redirect visitors to your desired page.

Submenu item with an Image banner

After adding the menu item title and its link, you can set a banner to it.

  • Select/Upload an image;

  • Add the image banner's Heading if needed;

  • Give the banner a button by inserting the Button label;

  • Adjust the color of the text.

This is an example of a Mega menu with Image banners added to the Submenu items:

Do the same with other menu and submenu items. You can also add third-level items to your menu.

Menu Appearance settings

Add the Mega menu to the Megamog theme

Once you have created a mega menu in FoxKit, go to the theme editor to display the mega menu.

Steps:

  1. Go to Themes > Customize

  2. Select the Header section > Mega menu

  3. Make nessary changes

  4. Save

Start with adding a Menu Heading to activate the feature. You can your Menu name, or any text you want.

Then, select the button position as on the menu location (On menu), or above (On top).

You can also set your mega menu to be opened by default (home page only).

Add mega menu for desktop view

1. Inspect your Mega menu element to get the menu ID

Click on the Mega menu element in the theme editor. Then, right-click on it and select Inspect from the menu to access the Inspect window.

Once you have opened the Inspect window, you will see the HTML and CSS code for the web page. Find the code starting with:

<mega menu class .. 

Expand that code:

In the nested code lines, find the one that starts with <div class="m-megamenu_ ...

Expand it and copy the mega menu id:

This is an example of the ID you need to copy: m-megamenu-desktop-sections--15228110667818__729ed7ff-cd70-41ab-97b7-db284c5764d5

2. Add the menu ID to FoxKit Mega menus

Once you have got your mega menu ID, go to FoxKit app > Mega menus to add it as the menu's CSS selector:

Steps:

  1. From FoxKit app, go to Mega menus

  2. Select the menu you want to add to the theme

  3. Click Settings

  4. Set the Render method as Replace CSS selector

  5. In the field CSS selector, insert: # + the ID you have copied earlier

For example: #m-megamenu-desktop-sections--15228110667818__729ed7ff-cd70-41ab-97b7-db284c5764d5

  1. Click Save.

Add mega menu for mobile view

1. Inspect your Mega menu element to get the menu id

Change the theme editor to mobile view using the device selector.

Click on the Mega menu element in the theme editor > Open the nested menu items.

Then, right-click on it and select Inspect from the menu to access the Inspect window. Once you have opened the Inspect window, you will see the HTML and CSS code for the web page. Find the code starting with:

<header-dropdown-menu class ...

Expand that code:

And copy the menu ID:

2. Add the menu ID for the mobile view to FoxKit Mega menus

Once you have got your mega menu ID, go to FoxKit app > Mega menus to add it as the menu's CSS selector for mobile.

Steps:

  1. From FoxKit app, go to Mega menus

  2. Select the menu you want to add to the theme

  3. Click Settings

  4. Set the Render method as Replace CSS selector

  5. In the field CSS selector of mobile menu, insert: # + the ID you have copied earlier

For example: #m-megamenu-desktop-sections--15228110667818__729ed7ff-cd70-41ab-97b7-db284c5764d5

  1. Click Save.

ET VOILÀ! ✨ Your mega menu is ready.

Refresh your store to check.

This feature requires you to install the to your store.

Then, select the type: / .

Select the you have set when you create the menu and start managing how your Mega menu appears on the storefront 🎨.

FoxKit All-in-one Sales Boost app
Text link
Image banner
Menu layout
Install FoxTransfer Chrome Extension FREE here