.menu-item, .page_item {
    display: inline-block;
}

// top menu
.top-menu {
    position: relative;
    z-index: 1;
    .menu-item {
        padding: 5px;
        a:after {
            margin-left: 10px;
            content: "\f178";
            @extend %icon;
        }
    }
}

//primary menu
.main-navigation {
    position: static !important;
    z-index: 9999;
    width: 100%;
    .menu > ul {
        margin: 0;
        padding: 0;
    }
    .menu {
        margin: 0;
        padding: 0;
        li {
            &:hover {
                > .sub-menu, > .children {
                    z-index: 999;
                    top: 100%;
                    visibility: visible;
                    opacity: 1;
                    > li {
                        margin-right: 0;
                    }
                }
            }
        }
    }
    .menu > ul > li, .menu > li {
        position: relative;
        display: inline-block;
        vertical-align: top;
        line-height: 1;
        @extend %transit;
        a {
            position: relative;
            z-index: 1;
            display: block;
        }
        &.menu-item-has-children, &.page_item_has_children {
            > a {
                &:after {
                    @extend %icon;
                    content: '\f0d7';
                    margin-left: 6px;
                    color: inherit;
                    font-size: 12px;
                }
            }
        }
    }
    .sub-menu, .children {
        position: absolute;
        top: 100px;
        left: 0;
        visibility: hidden;
        opacity: 0;
        background: #FFFFFF;
        margin: 0;
        font-weight: 300;
        padding: 0 15px;
        min-width: 240px;
        -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
        @extend %transit;
        li {
            padding: 15px 0;
            border-bottom: 1px solid #eeeeee;
            display: block;
            position: relative;
            &.menu-item-has-children, &.page_item_has_children {
                > a {
                    &:after {
                        position: absolute;
                        @extend %icon;
                        content: "\f0da";
                        font-size: 12px;
                        right: 0;
                    }
                }
            }
            .sub-menu, .children {
                left: 100%;
                top: 0 !important;
                margin-left: 15px;
            }
            &:last-child {
                border-bottom: none;
            }
        }
    }
    .mega-menu {
        position: static !important;
        .sub-menu, .children {
            width: 100%;
            ul {
                margin: 0;
                padding: 0;
                li {
                    i {
                        width: 16px;
                        color: #868686;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.nav-content {
    position: relative;
    & > div {
        position: static !important;
    }
}

@include media-breakpoint-up(md) {
    .top-menu {
        .menu-item {
            padding: 15px 30px 15px 0;
        }
    }
}