Advanced JS Configuration

To integrate with custom themes, sometimes further JS-based configuration is required.

Add JS config

The window.MEGAData object is read as the mega menu is loaded, allowing for custom configuration to be provided.

The easiest way to achieve this is by creating a new essential script to the Head of All pages in Script Manager.

The following example can be used to override the hamburger menu element used to open the mobile menu. See all Using a custom hamburger menu.

<script>
    window.MEGAData = window.MEGAData || {};
    window.MEGAData.hamburgerMenuSelector = '.button-mobile-nav-toggle';
</script>

The following is a full list of configuration options that can be defined on:

Field	Type	Notes
hamburgerMenuSelector	string	The selector of the element that should trigger the mobile menu to be shown. Defaults to `.mobileMenu-toggle`
mobile_menu_breakpoint	number	The widest screen width that the mobile menu should be shown at. The setting defined in PageBuilder will take priority.
mobile_search_enabled	boolean	Should the search box be copied into the mobile menu. The setting defined in PageBuilder will take priority.
mobile_account_links_enabled	boolean	Should the account links, currency switcher and gift certificate links be copied ino the moble menu. The setting defined in PageBuilder will take priority.
userNavPagesSelector	string	The selector to use to identify the account links that should be copied into the mobile menu. Defaults to `.navPages-list--user`
userNavQuickSearchSelector	string	The selector to use to identify the search box that should be copied into the mobile menu. Defaults to `.dropdown--quickSearch`

Once loaded, the Mega Menu JS can be interacted with by accessing window.MEGA.

For example, this could be helpful in order to programmatically trigger the display of the mobile menu, e.g.

this.MEGA.featureMobileMenu.toggleVisibility();