Menu Content

Styles for menu content in main_navigation module.

Structurally .menu-content element contains following element:

• .menu-content__container

LESS

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

Menu Content variables

Variables used to style menu content.

@menuContentLayerBoxShadow:  0px 4px 6px -4px rgba(17, 19, 22, 0.08), 0px 12px 16px -4px rgba(17, 19, 22, 0.08);

@menuContentContainerMaxWidthInPx: @breakPointXxl;
@menuContentContainerMargin: 0 auto;

@menuContentBgColorPrimary: @globalBodyBackgroundColor;

Menu Content styles

Standard menu content styles.

.menu-content {
    display: block;
    background-color: @menuContentBgColorPrimary;

    .custom-scrollbar();

    &_root {
        background-color: @menuBarBackgroundColor;
    }

    &_level-1 {
        box-shadow: @menuContentLayerBoxShadow;
    }

    &__container {
        display: flex;
        align-items: stretch;
        max-width: @menuContentContainerMaxWidthInPx;
        margin: @menuContentContainerMargin;
        overflow-x: auto;
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .menu-content {
        &__container,
        &_root {
            background-color: @menuBackgroundColorPrimary;
        }
    }
}