Storefront Mega Menus

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

Installation #

  1. Download the .zip file from your WooCommerce account.
  2. Go toWordPress 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 #

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 #

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 #

assign-location

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

Adding menu items #

adding-menu-items

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

Configuring a Mega Menu #

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 #

click add widget and search for the widget title to add it to the menu

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 #

Click and drag the edge of the widget to resize

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 #

delete-widget


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

Enable and preview #

enable-button

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

Look for the Hide Controls button at the bottom left-hand corner of the screen

TIP: At the bottom left corner of your screen, look for the Hide Controls button. Use this button to hide all Customizer panels and see a full preview of the menu on your site.

Powered by BetterDocs