Mega Menu Layout for Menu Items (SCSS)
Turns the dropdown of any menu item with the CSS class "mega-menu" into a wide, multi-column panel, in classic theme menus and the Navigation block.
Opens WPIDE on
Code
$mega-width: min(960px, 92vw);
$mega-columns: 4;
$mega-gap: 8px 32px;
$mega-bg: #ffffff;
$mega-shadow: 0 16px 40px rgba(0, 0, 0, .14);
@media (min-width: 1024px) {
.menu-item.mega-menu,
.wp-block-navigation-item.mega-menu {
position: static !important;
> .sub-menu,
> .wp-block-navigation__submenu-container {
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
width: $mega-width !important;
display: grid !important;
grid-template-columns: repeat($mega-columns, 1fr);
gap: $mega-gap;
padding: 24px !important;
background: $mega-bg;
box-shadow: $mega-shadow;
border-radius: 10px;
> li {
width: auto !important;
}
.sub-menu,
.wp-block-navigation__submenu-container {
position: static !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: none;
border: 0;
padding: 0 !important;
min-width: 0;
}
}
}
}Notes
Add mega-menu to the top-level item's CSS Classes (enable the field in Appearance > Menus > Screen Options) or the Navigation submenu block's Additional CSS class. Only applies on screens 1024px and wider.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.