Storefront Mega Menus

 

Storefront Mega Menus allows you to create enhanced full-width dropdowns that seamlessly integrate with your Storefront-powered WooCommerce shop.

Installation ↑ Back to top

    1. Download the .zip file from your WooCommerce account.
    2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded.
    3. Activate the extension.
    4. Click Save Changes.

More information at: Managing and Installing Plugins.

Usage ↑ Back to top

Storefront Mega Menus adds all its settings to WordPress Customizer, making it straightforward to use. Upon opening the Customizer at Appearance > Customize, navigate to Menus.

The Menu Customizer, introduced in WordPress 4.3, allows you to intuitively manage the site’s menus. In this section are several settings.

Currently, Mega Menus does not work for mobile devices. Another menu needs to be setup without Mega Menu functionality and designated as the Handheld menu.

Adding a new menu ↑ Back to top

new-menu

      1. Click the Add a Menu button.
      2. Name your new Menu.
      3. Click the Create Menu button.

Assigning a menu to a location ↑ Back to top

assign-location

Currently, Mega Menus only works in the Primary Menu location, which is the main navigation under your logo.

Adding menu items ↑ Back to top

adding-menu-items

Click the Add Items button and select items you would like to add to your Menu.

Configuring a Mega Menu ↑ Back to top

configuring-mega-menu

Click the arrow next to the title of one of your Menu Items to display the Mega Menu button.

The Mega Menu button opens a new side panel where you can manage the selected Menu Item.

Adding widgets ↑ Back to top

add-widget

Click the Add a Widget button to add a new widget. Select a widget from the list.

Note that if a Text Widget is used, then shortcodes included in WooCommerce can be applied.

Resizing and changing the order of widgets ↑ Back to top

resize-move-widgets

Resizing

resize-handle
With your mouse, hover over the corner/borders, then click and drag to resize the widget.

Changing the order

moving-widget
Click and drag the top of a widget to move it to a different position.

Deleting a widget ↑ Back to top

delete-widget
Click the arrow next to the widget title to display options. At the bottom select Delete.

Enable and preview ↑ Back to top

enable-button

When the Enable checkbox is ticked, the Mega Menus are shown on your site and Preview is available.

collapse

TIP: At the bottom left corner of your screen, look for the Collapse button. Use this button to hide all Customizer panels and see a full Preview of your site.

FAQs ↑ Back to top

Frequently asked questions about Storefront Mega Menus.

How do I link the custom menu widget title ↑ Back to top

To link the widget title of the custom menu when creating Mega Menus we recommend that you use a plugin titled Better Menu Widget which allows for this instead of the default WordPress Custom Menu Widget.

When using this widget remove the default text of sub-menu from the widgets menu classes section leaving this field blank like the screenshot below.

better-menu-css-classes

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top