Check the Theme Integration page to see if we’ve already written instructions on how to integrate Max Mega Menu with your theme.
What is Residual Styling?
Residual styling is the term used for any styling which has been left over from your existing theme menu and is now being applied to your Max Mega Menu enabled menu.
Max Mega Menu attempts to reset as much CSS as it can in order to minimize the effects of residual styling, but depending on how your theme has been created these resets might not be enough.
Why does it happen?
When you install Max Mega Menu and replace an existing menu with a mega menu, your theme is blissfully unaware that the menu it expects to be displayed is no longer there, and will continue to try and apply its own styling and functionality to Max Mega Menu. This causes conflicts between your theme and the plugin.
Residual styling becomes a problem when:
- Your menu is wrapped in other HTML elements, and your theme’s menu CSS has been applied to those wrappers instead of the root menu itself.
- Your theme uses !important CSS rules. These rules will always take priority and be applied to your menu.
What are the effects?
The effect of residual styling can be wide ranging, but might include:
- The menu not looking correct on mobile devices
- The menu being completely hidden on mobile devices
- Menu panels always displaying on hover, even when the event has been set to ‘click’ in the Menu Location Settings.
- Menu, sub menu, text etc alignment is incorrect.
- Colours in the menu are different to the colours specified in the menu theme.
How to remove residual styling from your menu
Make a backup before editing any files. Make any changes inside a Child Theme.
The example below is from the TwentyTwelve theme, but the same steps can be applied to most themes. In some themes you may need to work out where the menu is being output and edit those files instead.
The only line needed in your theme for Max Mega Menu to work is the one that contains ‘wp_nav_menu’. The only requirement of the wp_nav_menu call is that it specifies the ‘theme_location’ parameter (see Automatic Integration).
- Go to Appearance > Theme File Editor (or Tools > Theme File Editor if a block theme is active) and select your theme.
- Select header.php (Theme Header) from the Theme Files list.
- Delete any HTML which directly wraps the wp_nav_menu call (highlighted in red below), leaving the wp_nav_menu call itself in place.
- Click “Update File”.
Removing the highlighted lines above will stop any CSS using the ‘#site-navigation’ selector from being applied to the menu.
If you would rather not edit your theme files, you can output the menu using the Block, Shortcode, Widget or PHP method instead. Block themes (such as Twenty Twenty-Five) do not use header.php; use the Max Mega Menu block in the Site Editor instead.