Mega Menu Template

--V1.5.4 (July 5th, 2024)

Upgrading from 1.5.2 or 1.5.3 -> 1.5.4

Updating for ACSS 3.0 changes

  • Header Template V1.3.2 (no change)

  • SCSS V1.5.4

  • Dropdown Template Marble V1.1

  • Dropdown Template Ruby v1.2

  • Dropdown Template Slate v1.2

  • Dropdown Template Sandstone v1.2

Update Log


$fix-acss-content-gap: false; // SELECTION (true/false)
  1. Added the above variable as a true or false variable to fix some issues with the ACSS auto content gapping. Turning this to "true" will remove the gapping in the header template that is being added. IMAGE LINK

  2. When adding a max-width to all text elements in ACSS the menu would break appearance so a fix was implemented to ignore those changes. IMAGE LINK

  3. Reworked the CSS so you no longer have to duplicate dropdowns in order for them to inherit styling or use their classes, you can now drop in a 'dropdown' from the bricks elements into the 'nav items' item and it will auto inherit styling.



    • When using the new SCSS area within the ACSS dashboard there were some specificity issues due to the loading order of the sheet. Those specificity issues have been resolved with this new update.

    • Missed some var(--shade) variables in some of the dropdown templates. Those have been replaced with var(--neutral)

    • Color var(--action) replaced with var(--primary)

--V1.5.3 (April 5th, 2024)

New dropdown and other fixes.

This update comes with:

  • Header Template V1.3.2

  • SCSS V1.5.3

  • New Dropdown Template Marble

  • Dropdown Template Ruby v1.1

  • Dropdown Template Slate v1.1

  • Dropdown Template Sandstone v1.1

Update Log


  • Added new dropdown "Marble"

Bug fixes

  • Removed duplicate CSS from SCSS sheet

  • Header template and dropdown templates had missing classes.



    • replaced box shadows with ACSS variables

    • color black replaced with var(--neutral)

    • color white replaced with var(--white)

  • Dropdown Templates

    • var(--shade) replaced with var(--neutral)

    • added :focus-within styling where applicable

Upgrading from 1.5.2 -> 1.5.3

No need to update. This is purely for new project usage

--V1.5.2 (Dec 08, 2023)

Some accessibility fixes and verbiage updates.

This update comes with:

  • Header Template V1.3.1

  • SCSS V1.5.2

Update Log

Bug fixes

  • fixed accessibility where the close button and menu weren't receiving focus when opening the mobile menu with a keyboard

  • specificity conflict with bricks with targeting mobile menu wrapper with some snippet managers


  • Swapped Position of the Mobile Logo and Close Icon within the header template for better accessibility

  • updated verbiage to use "Menu Dropdown" and "Mega Dropdown" for better continuity between documentation

Upgrading from 1.5/1.5.1 -> 1.5.2

--V1.5.1 Hotfix (Dec 05, 2023)

Mobile logos were having some difficulties and needed some tweaking.

This update comes with:

  • SCSS V1.5.1

Update Log
  • fixed mobile logo not taking height from $mobile-logo-height when using png or jpeg

--V1.5 (Dec 04, 2023)

V1.5 comes with two new features that allow you to add a logo on mobile and the ability to have multi-level dropdowns.

This update comes with:

  • Header Template V1.3

  • SCSS V1.5

Update Log

New Features


  • Refactored CSS for less specificity and overlap

  • Reworked the menu dropdown to have no padding. Links inside of the menu dropdown now have padding to give a better clickable area and better hover styling

Last updated