Removing Residual Styling
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 it’s 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’.
- 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.
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.
Removing the highlighted lines above will stop any CSS using the ‘#site-navigation’ selector from being applied to the menu.