Menu Content Info

Styles for menu content info in main_navigation module.

Structurally .menu-content-info element contains following element:

• .menu-content-info__name
• .menu-content-info__link

LESS

You can modify any menu content info less variable in your User Less section to change menu content info styles.

Menu content info variables

Variables used to style menu content info.

@menuContentNameColor: @menuFontColorPrimary;
@menuContentLinkColor: @menuLinkColorSecondary;

@menuContentInfoBaseFontSizeInPx: @fontSizeInPxS;
@menuContentLinkFontSizeInPx: @fontSizeInPxXS;

@menuContentInfoMobileBaseFontSizeInPx: @fontSizeInPxM;
@menuContentLinkMobileFontSizeInPx: @fontSizeInPxS;

@menuContentInfoMobileLineHeightInPx: 24;
@menuContentInfoGapInPx: 12;

Menu content info styles

Standard menu content info styles.

.menu-content-info {
    display: flex;
    .pixel-to-rem(gap, @menuContentInfoGapInPx);
    align-items: center;

    .font-size(@menuContentInfoBaseFontSizeInPx);

    &__name {
        color: @menuContentNameColor;

        .weight-semibold();
    }

    &__link {
        * {
            color: @menuContentLinkColor;
        }

        .font-size(@menuContentLinkFontSizeInPx);
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .menu-content-info {
        flex-direction: column;
        align-items: flex-start;

        .pixel-to-rem(padding-top, 0);
        .pixel-to-rem(padding-bottom, 0);
        .pixel-to-rem(padding-left, 16);
        .pixel-to-rem(padding-right, 16);

        .font-size(@menuContentInfoMobileBaseFontSizeInPx);
        .line-height(@menuContentInfoMobileLineHeightInPx);

        &__link {
            margin-left: 0;

            .font-size(@menuContentLinkMobileFontSizeInPx);
        }
    }
}