I want to show navigation arrows in luma theme

Question

I want to show navigation arrows in luma theme like blank theme nav of Magento 2.

Anybody can suggest me how can I do this ?

Answer 1

Override below css in your theme :

/app/design/frontend/Vendor/YourTheme/web/css/source/_navigation.less

Removed below css from Line no. 52 to 79

.navigation {
    padding: 0;

    .parent {
        .level-top {
            position: relative;
            .lib-icon-font(
            @_icon-font-content: @icon-down,
            @_icon-font-size: 42px,
            @_icon-font-position: after,
            @_icon-font-display: block
            );

            &:after {
                position: absolute;
                right: 7px;
                top: -8px;
            }

            &.ui-state-active {
                .lib-icon-font-symbol(
                @_icon-font-content: @icon-up,
                @_icon-font-position: after
                );
            }
        }
    }
}

And Add Line no. 45

.navigation {
    padding: 0;

    .parent {
        .level-top {
            position: relative;
            .lib-icon-font(
            @_icon-font-content: @icon-down,
            @_icon-font-size: 42px,
            @_icon-font-position: after,
            @_icon-font-display: block
            );

            &:after {
                position: absolute;
                right: 7px;
                top: -8px;
            }

            &.ui-state-active {
                .lib-icon-font-symbol(
                @_icon-font-content: @icon-up,
                @_icon-font-position: after
                );
            }
        }
    }
}

adjust font-size as and position as per your theme requirements.