header
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        position relative

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

        a:hover
            background-color transparent
            text-decoration underline

@media screen and (min-width: 481px)
    header
        li
            $border-width = 14px
            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 8px

@media screen and (max-width: 480px)
    header
        li
            width 50%
            float left
            padding 0
            margin 0
        a,
        a:link,
        a:active
            padding 0

#logo
    display block
    border none

    &:hover
        background-color transparent
        text-decoration underline

    img
        display block
        margin .5em auto 1em auto
        width 9em
        height auto
        border none

header
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        position relative

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

        a:hover
            background-color transparent
            text-decoration underline

@media screen and (min-width: 481px)
    header
        li
            $border-width = 14px
            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 8px

@media screen and (max-width: 480px)
    header
        li
            width 50%
            float left
            padding 0
            margin 0
        a,
        a:link,
        a:active
            padding 0

#logo
    display block
    border none

    &:hover
        background-color transparent
        text-decoration underline

    img
        display block
        margin .5em auto 1em auto
        border none

Remove logo dimensions in CSS
Remove logo dimensions in CSS
