File "_navigation.scss"

Full Path: /home/amervokv/ecomlive.net/wp-content/themes/oceanwp/sass/components/header/_navigation.scss
File size: 7.3 KB
MIME-type: text/plain
Charset: utf-8

#site-navigation-wrap {
    float: right;
    position: relative;
    right: -15px;

    .dropdown-menu {
        list-style: none;
        margin: 0;
        padding: 0;

        > li {
            float: left;
            position: relative;

            > a {
                display: block;
                font-size: 13px;
                line-height: 74px;
                color: $color-11;
                padding: 0 15px;
                letter-spacing: 0.6px;

                &.site-search-toggle {
                    letter-spacing: 0;
                }

                &:hover {
                    color: $color-5;
                }

                .nav-arrow {
                    padding-left: 6px;
                    line-height: 1;
                }
            }

            > span.opl-logout-link {
                line-height: 74px;
                letter-spacing: 0.6px;
            }

            &.btn > a {
                background-color: transparent !important;
            }

            &.btn > a > span {
                background-color: $color-5;
                color: $color-1;
                padding: 12px 22px;
                font-weight: 600;
                @include border-radius(4px);
                cursor: pointer;
                text-align: center;
                @include transition(background-color 0.3s ease);

                &:before,
                &:after {
                    display: none !important;
                }
            }

            &.btn > a:hover > span {
                background-color: $color-6;
                color: $color-1;
            }

            &.btn.rounded > a > span {
                @include border-radius(25px);
            }
        }
    }
}

// If social
.has-social #site-navigation-wrap,
.has-after-header-content #site-navigation-wrap {
    right: 0;
}

// If left menu
.minimal-header.left-menu #site-navigation-wrap,
.transparent-header.left-menu #site-navigation-wrap {
    float: left;
    right: 0;
}

.minimal-header.left-menu #site-logo,
.transparent-header.left-menu #site-logo {
    padding-right: 20px;
}

// If center menu
.center-menu #site-navigation-wrap {
    position: absolute;
    float: none;
    left: 50%;
    right: auto;
    @include transform(translateX(-50%));
}

/**
 * SuperFish
 */
.sf-menu,
.sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-menu {
    li.menu-item {
        position: relative;
        white-space: nowrap;
        white-space: normal;
    }

    li:hover,
    li.sfHover {
        @include transition(none);
    }

    ul.sub-menu {
        position: absolute;
        visibility: hidden;
        top: 100%;
        left: 0;
        z-index: 9999;
    }

    > li {
        float: left;
    }

    li:hover > ul,
    li.sfHover > ul {
        display: block;
    }

    a.menu-link {
        display: block;
        position: relative;
        zoom: 1;
    }

    ul.sub-menu ul {
        top: 0;
        left: 100%;
        visibility: visible;
    }
}

/**
 * Dropdown
 */
.dropdown-menu,
.dropdown-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropdown-menu {
    .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: $color-1;
        border-top: 3px solid $color-5;
        min-width: 180px;
        line-height: 1;
        text-align: left;
        z-index: 999;
        @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
    }

    li .sub-menu li.menu-item {
        display: block;
        float: none;
    }

    ul .sub-menu {
        top: 0;
        left: 100%;
        margin-top: -3px;
    }
}

.no-top-border .sub-menu {
    border: none;
}

.dropdown-menu {
    ul li.menu-item {
        display: block;
        border-bottom: 1px solid $color-9;
    }

    ul li.menu-item:last-child {
        border-bottom: 0;
    }

    ul li a.menu-link {
        display: block;
        position: relative;
        float: none;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2em;
        letter-spacing: 0.6px;
        padding: 12px 15px;
        text-transform: capitalize;

        &:hover {
            background-color: $color-8;
            color: $color-11;

            .owp-icon use {
                stroke: $color-11;
            }
        }

        .nav-arrow {
            position: absolute;
            top: 50%;
            right: 15px;
            margin-top: -6.5px;
            padding: 0;
        }

        i {
            position: relative;
            width: 20px;
            text-align: center;
            margin-right: 3px;
        }
    }
}

/**
 * Icons
 */
.dropdown-menu li a.menu-link i {
    padding-right: 5px;
}

/**
 * Item description
 */
.nav-content {
    display: block;
    font-size: 11px;
    line-height: $base-line-height;
    padding: 5px 0;
    white-space: normal;
    @include opacity(0.7);
}

/**
 * Menu Icons
 */
.navigation li a {
    i.icon,
    span.icon-wrap,
    img.icon {
        display: inline-block;
        vertical-align: middle;
    }

    i {
        &.icon {
            width: auto;
            height: auto;
            font-size: 1.2em;
            line-height: 1;
            padding: 0 !important;
        }

        &.before,
        &.after {
            margin-top: -0.265em;
        }

        &.before {
            margin-right: 6px;
        }

        &.after {
            margin-left: 6px;
        }

        &.elusive {
            margin-top: -0.3em;
        }
    }

    span.icon-wrap {
        text-align: center;

        i.below,
        img {
            display: block;
            margin: 0 0 8px;
        }

        img {
            margin: 0 auto 8px auto;
        }

        span.menu-text {
            display: block;
            line-height: 1;
        }
    }

    img {
        &.before {
            margin-right: 6px;
        }

        &.after {
            margin-left: 6px;
        }
    }

    .svg {
        width: 1em;
    }

    .hidden {
        display: none !important;
    }
}

/**
 * After header content
 */
.after-header-content {
    float: right;
    height: 100%;
    display: table;

    .after-header-content-inner {
        display: table-cell;
        vertical-align: middle;
        height: 74px;

        > a,
        > div > a {
            display: inline-block;
            line-height: 74px;
        }
    }

    .elementor {
        display: inline-block;
    }
}

/*------------------------------------*
	Mobile Menu
*------------------------------------*/
.oceanwp-mobile-menu-icon {
    display: none;
    position: relative;

    &.mobile-right {
        float: right;
    }

    &.mobile-left {
        float: left;
    }

    a {
        font-size: 13px;
        line-height: 74px;
        color: #555;
        padding-left: 15px;
        letter-spacing: 0.6px;
        cursor: pointer;

        &:first-child {
            padding-left: 0;
        }

        &:hover {
            color: #13aff0;
        }

        &:focus {
            outline: 1px dashed #e3e3e3;
        }

        &.mobile-menu {
            .oceanwp-text,
            .oceanwp-close-text {
                padding-left: 6px;
            }

            .oceanwp-close-text,
            &.opened .oceanwp-text {
                display: none;
            }

            &.opened .oceanwp-close-text {
                display: inline-block;
            }
        }
    }
}