...

Add slogan, description, CTA label. CTA target link (all optional) and image (required) in order to display the navigation teaser.

Category group

A category can be marked with a group name. Please use single word string. In the child theme categories with such identifier may have distinct styling.

...

Backend

...

getActiveCategoryPath method, used in corresponding template magesuite-navigation/view/frontend/templates/navigation/active-category-path.phtml and then in theme-crativeshop in order to mark the active category with .active class

Category group styling

If a category is assigned to a group in the admin panel (see documentation above) it is possible to apply an additional styling to such navigation item.

Example:

.cs-navigation__item[data-category-identifier='eco'] {
    & > #{$root}__link {
        color: #76b636 !important;

        &:after {
            content: '';
            background-image: url('../images/icons/leaf.svg');
            background-repeat: no-repeat;
            background-size: 1.5rem;
            width: 1.5rem;
            height: 1.7rem;
            margin-left: 0.4rem;
            transform: translateY(0.2rem);
            display: inline-block;
        }
    }
}