...
Additional settings are added to the category edit form: Catalog -> Categories -> [category]
Settings
Add a new symbol:
Backend
...
Set root category Include in main bar setting ads yes. Category name will be replaced with the name provided Mega dropdown Navigation configuration.
...
| Info |
|---|
Clear Navigation cache type after changes. |
Backend
Frontend
...
Scripts
Megadropdoen script I located in components/navigation/navigation-mega-dropdown
It is initialized on HTML element [data-category-identifier="all-categories"]
| Code Block |
|---|
if (
navigationElement.querySelector(
'[data-category-identifier="all-categories"]'
)
) {
NavigationClass = NavigationMegaDropdown;
} |
class NavigationMegaDropdown extends Navigation It modifies the Navigation flyout behavior: skips adjusting column count for "All categories" root list, adjusts the number of submenu columns: the goal is to have as few columns as possible when keeping flyout's height bellow the given max height.
Styling
Html classes are the same as in the standard navigation flyout and styling is provided in navigation.scss file. there is an additional class: cs-navigation__flyout--all-categories that allows styling customizations in a child project.