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.
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
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.
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.
the $nav-items-gap variable wasnt working so that is now fixed.
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 and leaving your own adjustments.
Update Log
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
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.
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
menu now supports RTL languages
menu now has some much nicer animations
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)
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
variable $mobile-logo to turn feature on and off
variable $mobile-logo-height to change the height of the logo
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
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.
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.