Nickarce.com

Mega Menu Template

--V1.5.6.2 (July 23rd, 2025)

There was only one small update needed.

Update Log

  1. on mobile devices; when closing the menu, the menu items would flash quickly. This was due to some styling occurring on the bricks layer defaults.

Upgrading from 1.5.6.1 -> 1.5.6.2

  1. take everything from below 

/* -----------------------LOGIC *IGNORE*-------------------- */

from the new scss file and replace it in your file.

--V1.5.6.1 (Jul 17th, 2025)

In this update there were a few fixes that were needed due to the new 2.0 update.

Update log

  1. fixed an issue where mobile dropdown content wasn't filling the entire width of the mobile screen

  2. fixed an issue where the css was targeting .header and it was messing up the bricks UI because the bricks UI also uses .header

  3. updated some of the css to use @layer bricks.reset to solve some compatibility issues with the new bricks 2.0 cascade layer css

Upgrading from 1.5.6 -> 1.5.6.1

  1. update the .header selector to also target header .header to look like below

// header
header .header {
    padding-block: var(--space-m);
    padding-inline: var(--gutter);
    .header__container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .header__logo {
        width: 4rem;
        height: auto;
    }
}

  1. Simply take everything thats below

/* -----------------------LOGIC *IGNORE*-------------------- */

from the new SCSS file and replace what exists on and below that line in your current SCSS.

--V1.5.6 (April 11th, 2025)

Changed the way that sub menus open on mobile. before they use to open in position: absolute and this caused an issue where if you had a long navigation list and then clicked on a dropdown on mobile you would have to scroll back up to see the newly opened dropdown. This is now resolved.

Upgrading from 1.5.5.1 -> 1.5.6

  1. Simply take everything thats below

/* -----------------------LOGIC *IGNORE*-------------------- */

from the new SCSS file and replace what exists on and below that line in your current SCSS. 2. copy the new menu-v1.1.js file and replace your current header js with it

Update Log

  1. reworked how sub menu dropdowns open up on mobile. If you have a long list you no longer have to scroll back up to see the newly opened dropdown.

  2. Switched the icon and text positioning for the mobile back button so the icon is on the left and text is on the right for RTL languages.

  3. the $nav-items-gap variable wasnt working so that is now fixed.

  4. reworked the JS so that on mobile device when the menu is open, any dropdowns that are open are offset by the mobile header height

--V1.5.5.1 (Mar 16th, 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

Upgrading from 1.5.5 -> 1.5.5.1

Upgrading can happen between these two but would be time consuming and would recommend comparing the your current file with the new one using vs code compare and leaving your own adjustments.

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 13th, 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

Upgrading from 1.5.4 -> 1.5.5

There is no upgrading on this one. you would have to start fresh or use 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

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

NextMega Menu Template

Last updated