header
    // display flex
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        position relative
        padding-bottom 12px;

        &.active:after
            $border-width = 14px
            top 100%
            left 50%
            border solid rgba(0, 0, 0, 0)
            content " "
            height 0
            width 0
            position absolute
            pointer-events none
            border-color rgba(3, 3, 0, 0)
            border-top-color $node-gray
            border-width $border-width
            margin-left -($border-width/2)px

    a,
    a:link,
    a:active
        padding 0 12px
        text-transform uppercase
        font-size 14px
        color #ccc !important

    a:hover
        background-color transparent
        text-decoration underline

#logo
    width 182px
    margin 30px auto

header
    // display flex
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        $border-width = 14px
        position relative
        padding-bottom 12px;

        &.active:after
            top 100%
            left 50%
            border solid rgba(0, 0, 0, 0)
            content " "
            height 0
            width 0
            position absolute
            pointer-events none
            border-color rgba(3, 3, 0, 0)
            border-top-color $node-gray
            border-width $border-width
            margin-left -($border-width/2)px

        &.active:first-child:after
            margin-left -($border-width)px

    a,
    a:link,
    a:active
        padding 0 12px
        text-transform uppercase
        font-size 14px
        color #ccc !important

    a:hover
        background-color transparent
        text-decoration underline

#logo
    width 182px
    margin 30px auto

Fix active arrow on first menu item
CSS: Fix active arrow on first menu item
