North (SiteOrigin)
Remove Residual Styling
North applies styling to the default theme menu system using !important CSS. When Max Mega Menu is enabled for the main menu, the existing !important CSS is incorrectly applied to Max Mega Menu.
Step 1
Copy the header.php file to your Child Theme.
Find:
|
1 |
<nav id="site-navigation" class="main-navigation"> |
Replace with:
|
1 |
<nav id="site-navigation"> |
This edit removes the “main-navigation” class from the menu wrapper, which in turn stops the theme from being able to apply its own CSS to the menu.
Step 2
To move the menu back into it’s old position, go to Appearance > Customize > Additional CSS and enter the following:
|
1 2 3 4 |
#site-navigation { display: table-cell; vertical-align: middle; } |
Mobile Menu
To push the mobile menu onto it’s own row on smaller screens, go to Appearance > Customize > Additional CSS and enter the following:
|
1 2 3 4 5 6 7 8 9 |
@media screen and (max-width: 600px) { #masthead .site-branding { display: block; } #masthead #site-navigation { margin-top: 20px; display: block; } } |
You can adjust the “max-width” value to determine at which screen sizes (and below) the menu should be pushed onto a new line.