Shopkeeper

Basic Menu Theme Setup

To match the Mega Menu theme with Shopkeeper, go to Mega Menu > Menu Themes and set the following:

Menu Bar > Menu Background: transparent
Menu Bar > Menu Item Background: transparent
Menu Bar > Menu Height: 46px

Reduce Height of Sticky Menu

To reduce the height of the menu items when the theme header becomes sticky, go to Mega Menu > Menu Themes. In the Custom Styling area, add:

Depending on your theme setup, the background color of the sticky menu may match the font color of the menu items, making the links impossible to see when the header is stuck. To change the color of the menu items when the menu is stuck, go to Mega Menu > Menu Themes. In the Custom Styling area, add:

If your menu is appearing below the logo, and you want to align it alongside the logo, go to Mega Menu > Menu Themes. In the Custom Styling area, delete:

Make “Site Tools” Accessible

The menu will overlap the site tools in the header (Search icon, WooCommerce icon etc). To make them accessible, go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:

Fix Residual Styling Issues

Shopkeeper uses “!important” CSS to set the color of links within sub menus. This “!important” CSS will take precedence over the styling you have set in the Theme Editor, and, for example, will always set the font color to black.

To stop Shopkeeper from being able to apply it’s own styling to Max Mega Menu, first copy the “header-default.php” file to your child theme. If you are not using the child theme (provided to you inside the Shopkeeper zip file from ThemeForest), you can also edit the “header-default.php” file directly, but be aware that you will lose your changes if the theme gets updated.

Inside the “header-default.php” file, find (line ~153):

Replace with:

Mobile Menu

Shopkeeper displays it’s own Mobile Menu in a slide out panel to the right. The Max Mega Menu mobile menu is not compatible with Shopkeeper, so to disable it (and use the Shopkeeper mobile menu), go to Mega Menu > General Settings. Set the “Active Menu Instance” for “Main Navigation” to 1.

Remove gaps from either side of menu

Depending on the chosen color for your site background and menu background, you may see a 20px gap to the left and right of the menu. To remove this gap, go to Mega Menu > Menu Themes and paste the following into the Custom CSS area:

Related Articles