Header

The background, the text and icon colors are defined in ui.json by the scheme, primary and secondary.

It is possible to apply a gradient to the background with a variable and a mixin:

$background-gradient: linear-gradient(to right, #006487 0, #003865 100%);

@include headerTopGradient ($background-gradient);

There are also other mixins that can be used to modify the header. For example, to modify the header height:

@include headerHeight($firstLevel, $secondLevel);

Burger menu

Modify the icon's colors and size:

@include customHeaderButtons(
    $bgColor: null,
    $iconColor: null,
    $iconSize: null,
    $margin: null);

Horizontal nav

Modify custom properties:

@include customSecondaryLevelMenu(
    $backgroundColor: null,
    $activeColor: null,
    $color: null,
    $fontSize: null,
    $activeBgColor: null,
    $activeBgAfter: $activeColor,
    $removeAfter: false)

Logo

Modify the size of the logo:

@include bigMobileLogoHeader(
    $maxHeight,
    $maxWidth,
    $paddingTop: null);