The Multilevel Header Menu Template for Bricks Builder

The Multilevel Header Menu Template for Bricks Builder is designed to help you get a decent and professional header menu up and running on your Bricks websites. The Template has been designed to adapt to your setup whether you use vanilla Bricks or ACSS.

How to install

It is recommended that you install this update on a fresh website build. There's no need to install the new update if your current setup already works without issues. The process of installation remains the same:

1. Import The template JSON file through the Template import option (not recommended to copy & paste the JSON contents directly into Bricks Builder).
2. Open the template, and execute the javascript.
3. Copy the contents of the CSS stylesheet into your Child theme stylesheet.css file or use a code snippet manager like WPCodeBox (Highly recommended), Snippet Organizer or Fluent Snippets.
4. Select the mobile toggle element and upload the animated SVG icon supplied in the package.
5. Customize the stylesheet settings to your liking and build a Header menu that turns heads 🎉🥳

Do you need support or clarification? Drop a message by clicking the button below:

⚠️ Please note that purchases are non-refundable.

Update Changelog v1.4.5 (February 7, 2025)

Fixed an unwanted wrap where the contact block moves offscreen for longer lists. This should potentially fix some instances where tapping the back button breaks the off-canvas. (Thanks Eduard)

.mlh-offcanvas .brx-offcanvas-inner {
    flex-wrap: nowrap;
}

Minor Update Changelog v1.4.1 (October 4, 2024)

Corrected the CSS variable reference in the animated SVG icon so that the following toggle icon settings in the stylesheet reflect on the SVG icon:

--mlh-toggle-size
--mlh-toggle-stroke-width

If you already have 1.4.0 installed, simply replace the toggle icon with the one in this package and you should be okay. Nothing else needs to be touched.

Update Changelog v1.4.0 (October 4, 2024)

The complete rewrite of the Multilevel Header Template is finally complete. The template styles now fully exist in a separate, independent CSS stylesheet. No style settings from Bricks are present (apart from non-CSS settings that should be native to Bricks anyway). Here's why this is a big deal:

1. Updates moving forward can now be as simple as copying and pasting the new CSS stylesheet without the need to mess with what you already did in Bricks Builder.
2. Because the template comes with no Bricks-native styles, you now have the freedom to focus on customizing your header template if you so desire with the MLH truly serving as a robust starting point instead of getting in the way.
3. The full separation between stylesheet and template sets the ground work to easily add new features in the future if needed.

You still have control

The MLH stylesheet still has your settings in one place on the stylesheet with some styles further automated using some CSS calculations to save your time and keep your designs consistent, all while keeping you in control.

Changelog

1. Rewrote the entire styling for the template so that all default styles are contained in a separate CSS stylesheet. This way, you have a blank slate in Bricks, but a great starting point to having a beautiful mobile and desktop menu as quickly as possible.
2. All classes and variables connected to the MLH Template now have the prefix: mlh for easier identification.
3. Removed the dropdown caret width option from the stylesheet settings. The dropdown caret icon now automatically responds to the font weight value. This should make the caret width more uniform⁠⁠⁠⁠ ⁠⁠⁠—Thicker caret for heaver font weights; hairline caret for lighter font weights.
4. The dropdown caret icon for the desktop breakpoint now has a rotation animation when the dropdown tray is opened. It's the little details :)
5. New setting was added for the mobile menu toggle styling:
   --mlh-toggle-stroke-linecap: butt; /*butt | round | square*/ 
6. New setting added to control the size of the caret icon across the board:
   --mlh-caret-size: 0.6em 

Note: if you must install the new version on a site with a previous version of the MLH Template, do the following:

1. Open the class and variables manager in Bricks and select and delete the following classes. Bricks allows for multiple select with CTRL/CMD click. Don't worry you won't have to do this again after 1.4.0 update:
   1. desktop-nav__nav
   2. offcanvas
   3. offcanvas__content
   4. header
   5. header__inner
   6. desktop-nav
   7. offcanvas__backdrop
   8. mobile-nav
   9. mobile-nav__list-item
   10. mobile-nav__nav-link
   11. offcanvas__btn
   12. dropdown-back
2. Delete the Multilevel header template
3. Delete the Template's CSS stylesheet you had previously added (Vanilla or ACSS)
4. Having completely removed the old template, you can follow the installation instructions above.

Update Changelog v1.3.2 (September 30, 2024)

1. Fixed an issue where the mobile offcanvas menu would overscroll if any of the sub menus had a long list of items.
2. Fixed the bug that prevented the menu from scrolling a long list of items on the iPhone Safari mobile browser. (Thank you Glenn).

The complete rewrite for v1.4 is currently underway and will be available in 1-2 weeks.

Update Changelog v1.3.1 (September 25, 2024)

[Hotfix] Fixed an issue where the desktop navlink hover background wasn't working

Update Changelog v1.3 (September 23, 2024)

1. [NEW] Added a new caret icon to the back buttons since the unicode character icon wasn’t rendering in some mobile browsers
2. [NEW] This update allows us to add background highlight effect to the top level desktop nav links as seen on some SAAS website nav menus.
3. Cleaned out unneeded CSS classes added to offcanvas links .mobile-nav__list-item  and .mobile-nav__list
4. [Stylesheet] removed the left padding on the dropdown icon so that the label and caret are closer to one another as one item.
5. A few optimizations in preparation for separating all CSS styles from the Bricks Builder interface. This move will make updates as simple as copying and pasting the contents of the stylesheet. At the moment, some style settings still exist in the Builder template. The next version release should fix this.

Update Changelog v1.2 (August 31, 2024)

1. [New] Merged the template files, and moved the CSS to a separate stylesheet to make the template easier to maintain and/or update in future. Now we only have one Template (JSON) file you can import, and two CSS stylesheets in the package (Vanilla and ACSS).
2.  [New] Added variables to change background and border. Now style your menu background with different colors or even design a dark mobile menu altogether.
3. [Fix] Applied font weight to the desktop menu items.
4. [ACSS version] Set the header height variable to --header-height with a default fallback of 7rem in case header-height is not defined in ACSS settings panel.
5. [New] Added a new variable: --mm-list-gap for optional spacing between list items. Default value is set to 0.
6. [ACSS VERSION]Override ACSS automatic spacing for list items using --mm-list-gap
7. [Fix] Removed the Workaround to prevent desktop menu showing up on mobile viewports since the recent Bricks update has fixed this bug.

Update Changelog v1.1 (August 10, 2024)

1. [NEW] Added back button return icon for both the default back button and the custom back button.
2. [FIX] Prevent over-scroll on the parent submenu when any of the sublevels has more items than fit the screen
3. [FIX] Disabled top level menu scrolling when a sublevel dropdown is open
4. [FIX] Consistency when hovering on a dropdown button so both the label and caret icon change their hover colors together
5. [FIX] Fix the border radii when we hover on links
6. Other minor fixes