# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: menus, mega-menu, navigation, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-mega-menu-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Mega Menu Layout for Menu Items (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/