Mega Menu Template

--V1.5.5.1 (Mar 16, 2025)

Reworked how the link styling happens on desktop. The default link styling and the hover styling are now separate mixins. This is due to how the elements needed to be styled depending on if they were a link or dropdown

Update Log

1. changed out @mixin link-style to now have a @mixin link-hover-style for managing the hover state. this now applies to the open state of a dropdown as well

2. changed out the @mixin sticky-link-style to now also have a @mixin sticky-link-hover-style for the hover state

--V1.5.5 (Mar 13, 2025)

Pretty much a complete overhaul of the menu system.

There is no upgrading to this new version. You will have to completely redo the header or use it only on new projects

Update Log

Note worthy changes

1. (New) Back Button is now an actual button that can be seen by language switcher plugins and can be styled using the below selector in the sheet.

// BACK BUTTON STYLING https://nickarce.com/back-button-styling/ ******
.mm-close-dropdown-btn {
    background-color: unset;
    gap: 0.5em;
    padding-inline-start: unset;
}

2. (New) The template now has some JS included to maintain accessibility and to also close the the menu when its no longer at the breakpoint. This now means the breakpoint must be managed in the css and in the JS script that imports with the header.

3. You can now easily change out the hamburger color if you are using a custom icon instead of one from the included libraries by setting the below setting to fill or stroke (depending on what your icon requires)

// IF USING A CUSTOM HAMBURGER ICON DO YOU WANT TO SET THE FILL OR STROKE COLOR ******
$custom-hamburger-icon-fill-stroke: none; //SELECTION (none/fill/stroke)

4. you can now set the hamburger icon color if you have a sticky header

// SET STICKY HAMBURGER COLOR MUST HAVE $sticky-header-styles set to true for it to work ******
$hamburger-sticky-color-choice: red;

5. You can now easily change out the mobile close color if you are using a custom icon instead of one from the included libraries by setting the below setting to fill or stroke (depending on what your icon requires)

// IF USING A CUSTOM CLOSE ICON DO YOU WANT TO SET THE FILL OR STROKE COLOR ******
$custom-close-icon-fill-stroke: none; // SELECTION(none/fill/stroke)

Other changes

1. menu now supports RTL languages

2. menu now has some much nicer animations

3. breakpoint now needs adjustment on css sheet and js sheet

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

NEW

// ARE YOU USING ACSS AUTO CONTENT GAP?
$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.

Other

• ACSS CSS

  • 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

NEW

• Added new dropdown "Marble"

Bug fixes

• Removed duplicate CSS from SCSS sheet

• Header template and dropdown templates had missing classes.

Other

• ACSS CSS

  • 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

Other

• 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

• Mobile Logo Capability

  • variable $mobile-logo to turn feature on and off

  • variable $mobile-logo-height to change the height of the logo

• Multi-Level Dropdowns Capability

  • variable $multi-level-dropdown to turn on and off

Other

• 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