Lateral Menu

To change the menu styles, you can use this mixin:

@include lateralMenu_customStyles (
    $bgColor: null,
    $textColor: null,
    $iconsColor: null,
    $currentSectionColor: null,
    $currentSectionBgColor: $bgColor,
    $border: true,
    $borderColor: null,
    $subSectionBg: null,
    $subSectionBorderColor: null,
    $subSectionCurrentColor: null,
    $subSectionCurrentBgColor: null,
    $subSectionColor: null,
    $subSectionIconsColor: null,
    $thirdLevelBgColor: null,
    $thirdLevelCurrentColor: null,
    $thirdLevelCurrentBgColor: null,
    $thirdLevelColor: null,
    $headerBgColor: null,
    $footerBgColor: null,
    $externalBgColor: null,
    $externalTextColor: null,
    $externalIconColor: $externalTextColor);

Header lateral

Modify the logo:

@include bigMobileLogoMenu($maxHeight, $marginTop: "");

Search bar

Enable the search bar via a definition flag. Use the searchOptions flag to customize the some options of the search, but keep in mind that it is already internationalized by default.

Customize the look and feel in the custom.scss file, using the component's classes, they all start with mrf-searchForm and follow BEM naming convention.

Read more about search integration.

Navigation items

These styles can be modified with the above lateralMenu_customStyles mixin.

Footer lateral

These styles can be modified with the above lateralMenu_customStyles mixin.

Social profiles

The social profiles links must be enabled with the lateralMenuShareOptions flag in definition.json.

Then, the styles can be edited. There are two options:

1. Use this mixin to choose colors manually:

@include customSocialShareLateralMenu(
    $bgColor: null,
    $iconColors: null,
    $borderTop: null);

2. Use this mixin to automatically rely on the brand colors:

@include socialIconsColor();