MAINHACK

Viewing / Editing File: mainmenu.scss

ul.menu {
  list-style: none;
  margin: 0;
  ul {
    list-style: none;
    margin: 0;
  }
}
@media #{$min-xl} {
    .header-mobile-search, .ct-header-button-mobile, #ct-menu-mobile, .ct-logo-mobile {
        display: none;
    }
    .ct-main-menu-not-set {
        list-style: none;
        margin: 0;
        > li {
            text-align: center;
            a {
                font-size: 16px;
                color: #fff;
                font-weight: 600;
                line-height: 83px;
                position: relative;
                padding: 0 12px;
                &:hover {
                    color: $primary_color;
                }
            }
        }
    }
    .ct-main-navigation ul {
        display: block;
    }
    .ct-main-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        &.children-plus > li.menu-item-has-children > a:after {
            content: "+";
            margin-left: 3px;
            display: inline-block;
            vertical-align: top;
            position: relative;
            top: 1px;
        }
        &.children-arrow > li.menu-item-has-children > a:after {
            font-family:Material-Design-Iconic-Font;
            content: '\f2f9';
            font-weight: normal;
            margin-left: 5px;
        }
        .link-icon {
            color: $primary_color;
            margin-right: 8px;
        }
        li {
            position: relative;
            list-style: none;
            a {
                display: block;
                @include transition(all 300ms linear 0ms !important);
                @include font-family-heading($heading_default_font);
            }
            .ct-menu-toggle {
                display: none;
            }
        }
        > li {
            display: inline-block;
            vertical-align: middle;
            float: left;
            margin: 0 18px;
            > a {
                font-size: 16px;
                color: #000000;
                font-weight: 600;
                line-height: 83px;
                position: relative;
                padding: 0;
                &:before {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 0;
                    background-color: $primary_color;
                    height: 4px;
                    @include transition(all 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85));
                    width: 0;
                }
                &.is-one-page:after {
                    display: none !important;
                }
            }
            &:hover > a,
            &.current_page_item > a,
            &.current-menu-item > a,
            &.current_page_ancestor > a,
            &.current-menu-ancestor > a {
                &:before {
                    width: 100%;
                }
            }
            > ul.back {
                right: 0 !important;
                left: auto !important;
                li > ul.back {
                    right: 100% !important;
                    left: auto !important;
                    @include border-radius(3px 0 3px 3px);
                }
            }
            > .sub-menu li > ul.back, > .children li > ul.back {
                right: 100% !important;
                left: auto !important;
                @include border-radius(3px 0 3px 3px);
            }
        }

.sub-menu, .children {
            position: absolute;
            background: #fff;
            padding: 26px 0;
            top: 100%;
            left: 0;
            margin-top: 0;
            margin-bottom: 0;
            min-width: 230px;
            z-index: 99;
            visibility: hidden;
            opacity: 0;
            @include box-shadow(0 8px 83px rgba(#282828, 0.08));
            @include transition(all 300ms linear 0ms);
            @include border-radius(0 0 3px 3px);
            clip: rect(1px, 1px, 1px, 1px);
            @include transform(scaleY(0));
            transform-origin: 0 0 0;
            -webkit-transform-origin: 0 0 0;
            -ms-transform-origin: 0 0 0;
            -o-transform-origin: 0 0 0;
            li {
                padding: 0 32px;
                white-space: nowrap;
                a {
                    color: #222;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: normal;
                    padding: 7px 0;
                    position: relative;
                    &:before {
                        content: '';
                        width: 10px;
                        height: 2px;
                        background-color: $primary_color;
                        position: absolute;
                        top: 50%;
                        left: -10px;
                        @include transform(translate(0, -50%));
                        opacity: 0;
                        @include transition(all 300ms linear 0ms);
                    }
                }
                &.menu-item-has-children > a, &.page_item_has_children > a {
                    padding-right: 10px;
                    &:after {
                        content: "\f105";
                        font-family:"Font Awesome 5 Pro";
                        position: absolute;
                        right: 0;
                        top: 50%;
                        @include transform(translate(0, -50%));
                    }
                }
                &:last-child > a {
                    border-bottom: none;
                }
                > a:hover,
                &.current_page_item > a,
                &.current-menu-item > a,
                &.current_page_ancestor > a,
                &.current-menu-ancestor > a {
                    color: $primary_color;
                    padding-left: 18px;
                    &:before {
                        opacity: 1;
                        left: 0;
                    }
                }
            }
            .sub-menu, .children {
                top: 0;
                left: 100%;
                @include border-radius(0 3px 3px 3px);
            }
            .sub-menu-title {
                display: none;
            }
        }

li:hover,
        li.focus {
            overflow: visible;
            > .sub-menu, > .children {
                visibility: visible;
                opacity: 1;
                clip: inherit;
                @include transform(scaleY(1));
            }
        }
        /* Mega Menu */
        li.megamenu {
            .ct-heading .item--title {
                color: #222;
            }
            .vc_wp_custommenu.wpb_content_element {
                padding: 0;
                background-color: transparent;
            }
            .elementor-text-editor {
                white-space: break-spaces;
                align-items: flex-start;
                display: flex;
            }
            .ct-menu-item li {
                padding: 0;
            }
            .sub-menu, .children {
                width: 100%;
                max-width: 1170px;
                padding: 0;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                p {
                    margin-bottom: 0;
                }
                > li {
                    padding: 0;
                    white-space: inherit;
                    > .container {
                        padding: 0;
                    }
                }
                .wpb_content_element {
                    margin-bottom: 0;
                }
            }
            > .sub-menu {
                width: 1170px;
                margin: 0 !important;
                &.ct-mega-2-columns {
                    width: 460px;
                }
            }
            &.remove-pos {
                position: relative;
                > .sub-menu, > .children {
                    max-width: inherit;
                    width: auto;
                    left: 0;
                    right: auto;
                }
            }
        }
    }
    ul.back {
        right: 100%;
        left: auto!important;
    }
}

@media #{$max-lg} {
    .ct-logo-mobile {
        display: block;
        margin-bottom: 20px;
        text-align: center;
        img {
            max-height: 38px;
            max-width: auto;
        }
    }
    .header-mobile-search {
        position: relative;
        margin-bottom: 12px;
        .search-submit {
            padding: 0;
            border: none;
            line-height: 50px;
            height: 50px;
            width: 53px;
            position: absolute;
            top: 0;
            right: 0;
            color: #222222;
            font-size: 15px;
            @include border-radius(0px);
            @include box-shadow(none);
            background-color: transparent;
            background-image: none;
            border-left: 1px solid #ececf0;
            &:before, &:after {
                display: none;
            }
            &:hover {
                background-color: $primary_color;
                color: #fff;
            }
        }
        .search-field {
            @include border-radius(0px);
            border: 1px solid #ececf0;
            padding: 0 22px;
            color: #222222;
            font-size: 15px;
            &:focus {
                border-color: $primary_color;
                + .search-submit {
                    border-color: $primary_color;
                }
            }
        }
    }
    .ct-header-button-mobile {
        margin-top: 32px;
        margin-bottom: 30px;
        text-align: center;
        .btn {
            line-height: 40px;
            font-size: 13px;
            padding: 0 20px;

}
        + .ct-header-button-mobile {
            margin-top: -15px;
        }
    }
    .ct-header-navigation {
        position: absolute;
        height: 100vh;
        width: 260px;
        top: 0;
        left: 0;
        bottom: 0;
        margin: 0 !important;
        overflow: hidden;
        visibility: hidden;
        z-index: 999;
        .ct-main-navigation {
            overflow: hidden;
            width: 260px;
            padding: 58px 0 45px 0;
            background-color: #fff;
            position: fixed;
            z-index: 1001;
            top: 0;
            height: 100%;
            left: 0;
            right: 0;
            @include transition(all 300ms linear 0ms);
            @include transform(translateX(-100%));
            @include box-shadow(0 0 12px rgba(0,0,0,0.22));
            .ct-main-navigation-inner {
                height: 100%;
                overflow-y: scroll;
                padding: 0 26px 0 16px;
                margin-right: -10px;
            }
        }
        &.navigation-open {
            z-index: 999;
            visibility: visible;
            .ct-main-navigation {
                @include transform(translateX(0%));
            }
        }
    }

.ct-main-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        .link-icon {
            margin-right: 8px;
        }
        li {
            position: relative;
            list-style: none;
            a {
                display: block;
                padding: 0;
                line-height: 50px;
                color: $color_dark;
                @include font-family-heading($heading_default_font);
                font-size: 15px;
                font-weight: 600;
                border-bottom: 1px solid #ebebeb;
            }
        }
        > li {
            > a:hover,
            > a.current, 
            &.current_page_item > a,
            &.current-menu-item > a,
            &.current_page_ancestor > a,
            &.current-menu-ancestor > a {
                color: $primary_color;
            }
            > .sub-menu {
                border-bottom: 1px solid #ebebeb;
                padding-top: 9px;
                padding-bottom: 9px;
            }
        }

.sub-menu, .children {
            position: relative;
            display: none;
            li {
                a {
                    padding: 0 0 0 10px;
                    line-height: 34px;
                    font-weight: 500;
                    font-size: 14px;
                    border: none;
                }
                > a:hover,
                > a.current, 
                &.current_page_item > a,
                &.current-menu-item > a,
                &.current_page_ancestor > a,
                &.current-menu-ancestor > a {
                    color: $primary_color;
                }
                .ct-menu-toggle {
                    top: 2px;
                }
            }
            .sub-menu li {
                a {
                    padding: 0 0 0 20px;
                }
                .sub-menu li {
                    a {
                        padding: 0 0 0 30px;
                    }
                }
            }
        }

li.focus {
            > .sub-menu, > .children {
                visibility: visible;
                opacity: 1;
                max-height: none;
                overflow: visible;
            }
        }
    }
    
    .ct-menu-toggle {
        position: absolute;
        top: 10px;
        height: 30px;
        right: 0;
        border: 1px solid #ebebeb;
        width: 30px;
        cursor: pointer;
        @include border-radius(3px);
        font-family: "Font Awesome 5 Pro" !important;
        font-size: 15px;
        &:before {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            @include transition(all 300ms linear 0ms);
        }
        &.toggle-open:before {
            content: '\f106';
        }
    }

#ct-menu-mobile {
        .btn-nav-cart {
            @include transition(all 300ms linear 0ms);
            display: inline-block;
            width: 30px;
            height: 32px;
            color: #1f2233;
            font-size: 18px;
            line-height: 32px;
            cursor: pointer;
            margin-right: 6px;
            &:hover {
                color: $primary_color;
            }
        }
        .btn-nav-mobile {
            color: #1f2233;
            display: inline-block;
            font-size: 16px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            vertical-align: middle;
            width: 30px;
            cursor: pointer;
            position: relative;
            @include transition(all 300ms linear 0ms);

&:before, &:after, span {
                @include transition(all 300ms linear 0ms);
                content: "";
                background-color: #1f2233;
                display: block;
                height: 2px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                width: 26px;
                top: 22px;
            }
            &:before {
                top: 8px;
            }

span {
                top: 15px;
            }

&.opened {
                &:before {
                    top: 15px;
                    @include transform(rotate(45deg));
                }
                &:after {
                    @include transform(rotate(-45deg));
                    top: 15px;
                }
                span{
                    display: none;
                }
            }

}
    }
    li.megamenu {
        > .sub-menu {
            left: 0 !important;
        }
        .container {
            padding: 0;
            .elementor-column-wrap {
                padding: 0 !important;
            }
        }
        .elementor-row {
            display: block;
            > .elementor-element {
                width: 100% !important;
                margin-top: 14px;
            }
        }
        .elementor-element-populated, .elementor-section, .elementor-widget-wrap {
            padding: 0 !important;
        }
        .elementor-widget-wrap {
            margin-bottom: 32px;
        }
    }
}

#ct-header, #ct-header-elementor {
    li.megamenu {
        .ct-showcase1 .ct-showcase-meta h3 {
            margin-top: 24px;
            font-weight: 600;
            font-size: 16px;
        }
        .ct-showcase1 .ct-showcase-link {
            line-height: 36px;
            padding: 0 14px;
            color: #fff;
            font-weight: 600;
            font-size: 13px;
            margin: 5px 8px;
            min-width: 105px;
        }
    }
}
.col-line-mega {
    @media #{$min-xl} {
        > .elementor-column-wrap:before {
            width: 0;
            content: '';
            border-left: 1px solid #f1f0f0;
            position: absolute;
            top: 40px;
            bottom: 40px;
            left: 0;
        }
    }
}

@media #{$min-xl} {
    #ct-header-elementor .elementor-section:not(.elementor-section-full_width) .elementor-inner-section .sub-menu .elementor-container.elementor-column-gap-extended {
        margin: 0;
    }
    #ct-header-elementor .elementor-section.elementor-inner-section.elementor-section-boxed .ct-nav-menu .ct-main-menu .megamenu .sub-menu {
        width: 100%;
        max-width: 1170px;
        margin: 0 15px;
        left: 15px;
    }
}

/* Widget Elementor */
.ct-nav-menu {
    &.icon-hide .link-icon {
        display: none;
    }
    .ct-main-menu > li {
        > a {
            display: inline-flex;
            align-items: center;
            line-height: 62px;
        }
        &.menu-item-has-children > a:after {
            font-family:Material-Design-Iconic-Font;
            content: '\f2f9';
            font-weight: normal;
            margin-left: 5px;
            color: $gradient_color_to;
            font-size: 116%;
            @include transition(all .25s cubic-bezier(.3,.3,0,.8));
        }
        &.menu-item-has-children > a:hover:after {
            transform: scaleY(-1);
        }
        &.megamenu {
            position: static;
        }
    }
    &.f-default .ct-main-menu > li > a {
        &:before {
            height: 3px;
            @extend .bg-gradient;
            top: auto;
            bottom: 0;
            right: auto;
            left: 0;
        }
        &:after {
            color: inherit;
        }
    }
    &.f-skew .ct-main-menu > li {
        > a:before {
            display: none;
        }
        &:nth-child(1) {
            margin-right: 34px;
            margin-left: 0;
            > a {
                padding: 0 66px 0 42px;
                position: relative;
                z-index: 1;
                overflow: hidden;
            }
            &.menu-item-has-children > a:after { 
                color: #fff;
            }
            .ct--skew {
                z-index: -1;
                @include transition(all .25s cubic-bezier(.645,.045,.355,1));
                position: absolute;
                top: 0;
                right: 22px;
                width: 100%;
                height: 100%;
                &:before, &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    transform: skewX(-12deg);
                }
                &:before {
                    z-index: -1;
                    @extend .bg-gradient;
                }
                &:after {
                    background-color: #fff;
                    z-index: -2;
                    margin-left: 14px;
                }
            }
        }
    }
}

.ct-menu-single1 {
    font-size: 14px;
    color: #4e4e4e;
    position: relative;
    z-index: 99;
    a {
        color: inherit;
        &:hover {
            color: $primary_color;
        }
    }
    ul {
        margin: 0;
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        @media #{$max-xl} {
            left: auto;
            right: 0;
        }
        min-width: 160px;
        padding: 18px 24px;
        background-color: #fff;
        z-index: 99;
        @include box-shadow(0 18px 43px rgba(#5a5a5a, 0.14));
        @include border-radius(0 0 4px 4px);
        @include transition(.3s cubic-bezier(.24,.74,.58,1));
        transform: perspective(300px) rotateX(-90deg);
        transform-origin: 50% 0%;
        li {
            padding: 4px 0;
        }
        a {
            display: inline-flex;
            align-items: center;
            img {
                max-width: 21px;
                @include border-radius(21px);
                margin-right: 9px;
                @include box-shadow(0 2px 6px rgba(#000, 0.06));
            }
        }
    }
    .current--item {
        line-height: 62px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        cursor: pointer;
        img {
            max-width: 21px;
            @include border-radius(21px);
            margin-right: 9px;
        }
        label {
            cursor: pointer;
            &:after {
                content: "\f103";
                font-family: "Font Awesome 5 Pro";
                font-weight: 900;
                margin-left: 8px;
                line-height: 1;
                @include transition(all 220ms linear 0ms);
                display: inline-flex;
                color: inherit;
            }
        }
    }
    &:hover {
        .current--item label:after {
            @include transform(scaleY(-1));
        }
        .current--item + ul {
            margin-top: 0;
            transform: perspective(300px) rotateX(0deg);
        }
    }
    &.dr-right ul {
        left: auto;
        right: 0;
    }
}

body.rtl {
    .ct-main-menu.children-plus > li.menu-item-has-children > a::after, .ct-main-menu.children-arrow > li.menu-item-has-children > a::after {
        margin-left: 0;
        margin-right: 6px;
    }
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: mainmenu.scss

Server Info

System Features

User Info