To integrate Max Mega Menu with the WooCommerce StoreFront theme go to Plugins > Add New and search for Max Mega Menu – StoreFront Integration.

The StoreFront integration plugin will fix the square icons seen before each menu item, and add a new “StoreFront” menu theme which is pre-styled to replicate the StoreFront theme styling.

View our StoreFront Demo Site

Change menu row background color

Note to StoreFront Powerpack users: If you are using the Header Customizer functionality in StoreFront PowerPack the following CSS will not work. The menu does not sit in it’s own row, therefore it’s impossible to change the background of the menu “row” without changing the background color for the whole header. You will need to set the background of the menu to transparent or the same color as your theme header so that the menu blends into the header.

Standard StoreFront users:

The StoreFront menu does not span the full width of the page. The background color of the menu will only apply to the menu itself – not the full width of the row that the menu is displayed within.

To apply the same menu background color to the row that holds the menu, go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

PootlePress StoreFront Pro

If you are using StoreFront Pro by PootlePress, you should enable the “Remove search icon from nav” option under Appearance > Customize > Header and Navigation > Primary Navigation.

Making the menu full width

By default the menu will be 73% wide (to allow a space on the right hand side of the menu for the cart element). If you have removed the cart element either manually or by using a plugin, you can use the following CSS to make the menu 100% wide:

Related Articles