body{ color: $body-color; } .o_footer{ color: $body-color; } .navbar{ .fa-plus{ position: relative; } } #top-nav { .dropdown-toggle { margin-bottom: 0; } li{ ul li{ padding-right: 0px; a{ align-items: start; &:hover{ background: #d2cfcf; } } } } @media (max-width: 540px) { margin-bottom: 10px 0; li { border: none; font-size: 12px; font-weight: normal; } .lang_dropdown { .dropdown-menu { position: relative; // border: 0; // width: 100%; li { color: $dark-grey; font-size: 12px; } } } } li { @extend .top__links; text-align: center; } .dropdown-menu { a { color: $black !important; } li { border-right: none; text-align: left; } } } .ks-header-6{ #my_wish { margin-left: 20px; margin-top: -7px; .nav-link { position: relative; padding: 0; } } } .o_affix_enabled, .o_affix_disabled { .main-menu-1, .custom_header_nav { width: 50%; align-items: center; } .custom_header_nav { justify-content: flex-end; @media (max-width: 990px) { flex-direction: row; } } .search_container { .easy-autocomplete { width: auto !important; } input { width: 350px; height: 45px; background: #f7f7f7; margin-right: 10px; max-width: 100%; @media (max-width: 1240px) { position: absolute; right: 0; transition: 0.2s ease-in-out; transform: scaleX(0); transform-origin: right; } // @media (max-width: 540px) { // width: 240px; // right: -55px; // z-index: 100; // height: 30px; // top: 7px; // } } @media (max-width: 1240px) { margin-top: -45px; } @media (max-width: 540px) { order: 4; min-width: 42px; } button.btn.oe_search_button { position: absolute; font-size: 24px; right: 15px; background: transparent; padding: 0; line-height: 1; top: 8px; z-index: 101; @media (max-width: 540px) { right: 0; } } } .custom_header_nav { .nav-item { width: auto; } } #my_cart_2 { display: flex; align-items: center; margin-left: 10px; a { padding: 0; .ml-4 { margin-left: 0 !important; margin-top: -1px; } } .badge { top: -7px; right: -14px; } } #top_menu_collapse { .main-menu-1 { justify-content: space-around; @media (max-width: 990px) { align-items: baseline; text-align: left !important; width: 100%; } @media (max-width: 540px) { min-width: auto; } .nav-item { position: initial !important; .dropdown-menu { @media (min-width: 991px) { left: 50%; transform: translateX(-50%); } } } } } .navbar { .nav-item { width: auto; .dropdown-menu { padding: 0; border: none; } .submenu__inner { margin-top: -16px; @media (max-width: 990px) { width: auto; border-top: none; box-shadow: none; } } } @media (max-width: 990px) { margin-top: 0; } @media (max-width: 540px) { padding: 0 10px; } } } .search__in { input { transform: scaleX(1) !important; } } .navbar-toggler { border: none; } #search-btn { color: #3a3939; } .easy-autocomplete { input { border-color: #969696; } li { color: $black; } } .submenu_main_links { .submenu_inside { li { @media (max-width: 990px) { margin-bottom: 0 !important; padding: 0 0 10px !important; } } } .submenu_lvl_1 { @media (max-width: 990px) { border-bottom: none !important; width: 100%; } } } .js_usermenu { box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 3px 1px; @media (max-width: 990px) { position: absolute !important; } } #top_menu_collapse { .dropdown-menu { border: none; } } .submenu_main_links { width: 100%; img { height: 150px; object-fit: contain; margin-bottom: 6px; } .submenu_inside { li { a { font-weight: normal !important; } } } @media (max-width: 990px) { margin-bottom: 20px; } } .menu-slider { width: 33%; @media (max-width: 990px) { width: 50%; } @media (max-width: 540px) { width: 75%; } } .search_container { .btn { &:focus { box-shadow: none; } } } #ks_categrory_slider_mm { .owl-nav { .owl-prev, .owl-next { &:hover { background: $primary; color: $dark; } } } } #my_cart{ .badge-primary { position: relative; } } .remove_after_content { &:hover{ .dropdown-menu { display: block; } } .dropdown-toggle::after{ display: none; } } .badge-primary{ background-color: $theme-color-primary; border-radius: 50%; color: $theme-text-color; position: absolute; top: 0; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; padding-top: 1px; } #my_cart_2{ display: block; a { position: relative; } } .main-menu-1{ min-width: 465px; li{ font-weight: 600; //color: #0a0a0a !important; letter-spacing: 1.35; font-size: 15px; } } .custom_header_nav{ min-width: fit-content; } .remove_after_content { .nav-link { padding: 0; } } .navbar-light { .navbar-nav { .nav-link { color: rgba(0, 0, 0, 0.8); &:hover { color: rgba(0, 0, 0, 1); } } } } #my_wish { .fa-heart{ font-size: 20px; vertical-align: middle; } } .easy-autocomplete-container ul li, .easy-autocomplete-container ul .eac-category { text-align: left; } .lang_dropdown{ margin-right: 40px; } @media (min-width: 991px) { .submenu_main_links { .submenu_link_item { text-align: center; &:after { left: 50% !important; transform: translateX(-50%); } } .submenu_inside { li { text-align: center; } } } } @media (min-width: 991px) { #top_menu_collapse, #top_menu_collapse_clone { .nav-item { .dropdown-menu.ks_not_mega_menu { left: 0 !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px 0px, rgba(0, 0, 0, 0.22) 0px 15px 12px 0px; animation: moveup 0.3s ease-in-out forwards; a.dropdown-item { span { position: relative; &:after { content: ''; display: block !important; position: absolute; left: 30%; bottom: -2px; width: 0; border-top: 1px solid $primary; transition: 0.2s ease-in-out; } } &:hover { background: $white; span { color: darken($primary, 20%); &:after { width: 40%; } } } } } &.ks_landing_menu { position: relative !important; } } } } header.o_header_affix.affix.affixed .navbar-expand-md #top_menu_collapse_clone .nav-item.dropdown, .navbar-expand-md #top_menu_collapse .nav-item.dropdown { @media (max-width: 768px) { width: 100%; .mega_submenu { margin-top: 10px; margin-bottom: 10px; } .bg-white, .dropdown-menu { background: transparent !important; .dropdown-item span, .submenu_link_item { color: rgba(0, 0, 0, 0.5); text-transform: capitalize; font-weight: 400; &:hover { color: rgba(0, 0, 0, 1); } } } .js_usermenu { box-shadow: none; } } } .navbar-expand-md { .container { max-width: 1400px; padding: 10px; } #top_menu_collapse { position: relative; .nav-item { .nav-link { @media (max-width: 768px) { text-align: left; } } &.dropdown:not(.ks_landing_menu):not(.o_extra_menu_items) { position: initial !important; } } #my_cart { display: flex; align-items: center; i { margin: 0 5px; font-size: 20px; } .my_cart_quantity { margin: 0 5px; display: inline-flex; } } #my_wish { display: flex; align-items: center; i { margin: 0 5px; } .my_wish_quantity { position: relative !important; top: 0; display: inline-flex; } } #top_menu .nav-item.dropdown > .dropdown-menu:not(.ks_not_mega_menu) { background: white !important; margin-top: 10px; } .ks_not_mega_menu { top: 20px; border-radius: 0; padding: 10px 0; } .o_extra_menu_items { margin: 0 5px; > .dropdown-menu { margin-top: 0 !important; padding: 10px 0; .ks_not_mega_menu { top: 0 !important; } } } } .js_usermenu { margin-top: 0 !important; padding: 10px 0 !important; border-radius: 0; @media (min-width: 991px) { box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); } } } .o_header_affix.affix.affixed { .navbar-expand-md { margin-top: 0; border-bottom: 1px solid #ccc; .container { position: relative; } #top_menu_collapse_clone { .nav-item { .nav-link { @media (max-width: 768px) { text-align: left; } } &.dropdown:not(.ks_landing_menu):not(.o_extra_menu_items) { position: initial !important; } } #my_cart { display: flex; align-items: center; i { margin: 0 5px; font-size: 20px; } .my_cart_quantity { margin: 0 5px; display: inline-flex; } } #my_wish { display: flex; align-items: center; i { margin: 0 5px; } .my_wish_quantity { position: relative !important; top: 0; display: inline-flex; } } #top_menu .nav-item.dropdown > .dropdown-menu:not(.ks_not_mega_menu) { background: white !important; margin-top: 10px; .ks_not_mega_menu { top: 0; } } .ks_not_mega_menu { top: 20px; border-radius: 0; padding: 10px 0; } .o_extra_menu_items { margin: 0 5px; > .dropdown-menu { padding: 10px 0; margin-top: 0 !important; } } } } #my_wish { position: relative !important; } @media (max-width: 990px) { #top_menu_collapse_clone { max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; } } .navbar .o_menu_loading .nav-item { height: auto !important; overflow: visible !important; opacity: 1 !important; } .ks_vertical_tabs { margin: 10px 0 20px; } } .top__links{ font-size: $font12; padding-right: 20px; display: flex; align-items: center; } .mega_submenu { .submenu__inner { @media (min-width: 991px) { max-height: 80vh; overflow: auto; } @media (min-width: 1025px) { &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } &::-webkit-scrollbar-thumb { background-color: darken($primary,20%); outline: 1px solid slategrey; } } } } .badge { &-primary { width: 17px; height: 17px; } } .ks-header-price { height: 100%; display: flex; justify-content: center; align-items: center; } //shared properties .ks-header-2-main, .ks-header-5 { #top_menu { >li { @media (min-width: 992px) { padding: 0 20px; } >a { font-weight: 500; position: relative; span { &:after { content: ''; position: absolute; bottom: 0; width: calc(100% - 6px); left: 3px; border: none; border-bottom: 2px solid $primary; transition: 0.2s ease-in-out; transform: scaleX(0); } } @media (min-width: 991px) { &.active{ span { &:after { transform: scaleX(1); } } } } } @media (min-width: 991px) { &:hover { >a { span { &:after { transform: scaleX(1); } } } } } } } #my_cart { display: none; } } .ks-header-2-main, .ks-header-3-main, .ks-header-5 { @media (max-width: 990px) { .navbar-toggler { display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; position: relative; z-index: 90; font-size: 20px; margin-top: 8px; &:before { content: "\f0c9"; } &-icon { display: none; } } } } .js_language_selector { &:not(.dropdown-menu), label { cursor: pointer; background: transparent; } } #top-nav { > li { > .col { padding: 0; font-size: 12px; min-height: 100%; .dropdown-toggle { padding: 0 10px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 35px; } } > a { min-height: 35px; } } } #my_cart_2 { span.d-none.d-sm-inline { margin-right: 4px; } } .navbar-brand { height: auto; max-height: 60px; } .ks-header-offer { border-radius: 0; margin-bottom: 0; color: $theme-text-color !important; position: relative; z-index: 10; max-width: 1400px; margin: auto; @media (min-width: 1440px) { padding: 10px 0; } &-container { background: $primary !important; } } #oe_main_menu_navbar { ~ .ks-header-offer-container { ~ #wrapwrap { .affixed { margin-top: 45px !important; } } } } .ks-header-offer-container{ position: relative; z-index: 200; } .navbar-brand { height: auto; img { height: auto; } } .container-lg { margin: auto; width: 100%; @media (min-width: 1200px) { max-width: 1400px; } @media (max-width: 1440px) { padding: 0 20px; width: 90%; } @media (max-width: 575px) { width: 100%; } @media (max-width: 1024px) { width: 100%; } } .navbar { .navbar-nav { > .nav-item { > .nav-link { font-weight: 500; text-transform: uppercase; color: #323232; } } } } .remove_after_content { max-width: 112px; a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &.ks-custom-login{ display: block; } } b { span { font-weight: 500; } font-weight: 500; } } .navbar-expand-lg { .navbar-collapse { .nav-item { > .nav-link { font-weight: 500; text-transform: uppercase; color: #323232; } } } .container { @media (min-width: 1200px) { max-width: 1400px; //position: relative; width: 90%; } } } .o_main_navbar > ul > li > a { padding: 0px 8px !important; } .ks-mh-35 { min-height: 35px; } .dropdown-menu { margin-top: 0; } .navbar-collapse { @media (max-width: 990px) { max-height: 60vh; overflow-y: auto; overflow-x: hidden; .dropdown { &-toggle::after { transition: 0.2s ease-in-out; } &.show { .dropdown-toggle::after { transform: rotate(180deg); } } } } @media (max-width: 575px) { max-height: 50vh; } @media (max-width: 330px) { max-height: 40vh; } } .o_affix_enabled, .o_affix_disabled { position: relative; z-index: 1030; .navbar .o_menu_loading .nav-item { height: auto !important; overflow: visible !important; opacity: 1 !important; } } #wrapwrap .o_header_affix { z-index: 1045 !important; } #my_wish.nav-item, #my_cart_2.nav-item { display: block !important; } .navbar-expand-lg { #top_menu { .dropdown-menu { border: none; } } } #wrapwrap { .my_wish_quantity { top: -5px; } } #oe_main_menu_navbar { z-index: 1000000; } #oe_manipulators { z-index: 1000; max-width: 1400px; margin: auto; &-container { background: $primary !important; } } #top_menu_collapse .nav-item.o_extra_menu_items, #top_menu_collapse_clone .nav-item.o_extra_menu_items { position: relative !important; > .dropdown-menu { @media (min-width: 991px) { border-radius: 0; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); right: -4px; left: auto !important; .tab-pane { a { padding: 0 !important; } } } .menu-slider { width: 100%; } } li { background: $white; span { white-space: normal; } } } #top_menu .o_extra_menu_items { > .dropdown-menu { //list container > .dropdown { // list item name &:hover { .dropdown-menu { display: block; } } > .dropdown-menu:not(.ks_not_mega_menu) { //list mega menu conatiner left: 0 !important; min-width: 300px; width: fit-content; top: 0 !important; padding: 0; @media (min-width: 991px) { transform: translateX(-99%) !important; } .submenu__inner { animation-name: moveright; background-image: none; flex-wrap: wrap !important; @media (min-width: 991px) { max-height: 50vh; } .submenu_img { width: 100% !important; } .submenu_main_links { padding: 10px !important; } } //for tab mega menu .nav-tabs { min-width: auto; border-right: 1px solid #ccc; > .nav-item { border: none; padding: 5px; } .ks-mega-menu-tab-img { display: none; } } .tab-content { .submenu_inside { flex: 100%; max-width: 100%; padding: 10px 20px; > a { padding: 5px 20px; font-size: 1em; } } } //for product mega menu .submenu_main_links { .submenu_lvl_1 { width: 50%; .submenu_link_item { text-align: left; font-weight: 500; &:after { display: none; } } img { display: none; } } .ks_filp_hover_effect { margin-bottom: 12px; @media (min-width: 991px) { font-weight: bold !important; } } .submenu_inside { li.mb-2 { text-align: left; } } } @media (max-width: 990px) { margin: 10px; } } //drodown link .ks_not_mega_menu.dropdown-menu { animation: none; padding-right: 0 !important; margin-left: 0 !important; @media (min-width: 991px) { transform: translateX(-99%) !important; } li:first-child { margin-top: 0; } } } } &:hover { > .dropdown-menu { display: block; } } } header { .nav-item.divider { display: none; } } .js-menu-opened { overflow: hidden; height: 90vh; main, footer { position: relative; &:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 10; } } } .js_language_selector, .ks-price-list, .js_usermenu { .dropdown-item { &:hover, &:focus { background: $white; } } .dropdown-menu { z-index: 1000; } } .navbar-brand { height: 100%; display: flex; align-items: center; img { max-width: 150px; max-height: 60px; @media (max-width: 575px) { max-height: 40px; } } @media (max-width: 575px) { max-height: 40px; } } .ks-price-list { .dropdown-toggle { padding: 0 !important; } } .navbar-collapse { .nav-item { a:focus { outline: none; } } .dropdown-item.active, .dropdown-item:active { background: $white; color: $black !important; } } .navbar { margin-top: 0; } .ks_not_mega_menu { .dropdown-item { span { word-break: break-all; white-space: normal; } } } .navbar-expand-lg.ks-default-header { border-bottom: 1px solid #ccc; @media (max-width: 768px) { .navbar-nav.text-right { text-align: left !important; } #my_cart { .nav-link { display: flex; align-items: center; } .fa { font-size: 20px; margin-right: 5px; } .badge { margin-left: 5px; } } #my_wish { margin: 0 !important; .fa { margin-right: 5px; } .nav-link { display: flex; align-items: center; } .badge { position: relative; top: 0; margin-left: 5px; } } .submenu__inner { margin-top: 0 !important; } } @media (max-width: 575px) { padding: 10px; .navbar-collapse { padding: 10px; } } } @media (max-width: 990px) { .navbar-collapse { .nav-item { .dropdown-menu, .bg-white, .nav-link.active { background: transparent !important; } } } } @media(max-width: 767px){ .search_container{ .easy-autocomplete { max-width: 70px; } &.search__in{ .easy-autocomplete { max-width: inherit; } } } } // Toggle Navigation @keyframes fadeIn{ 0% { opacity:0; } 100% { opacity:1; } } @media(max-width: 992px){ .o_connected_user{ .navbar-collapse #top_menu{ top: 45px; height: calc(100% - 45px); } } } @media(max-width: 991px){ .navbar-collapse{ position: fixed !important; top: 0px !important; max-width: 280px !important; height: 100vh !important; max-height: 100vh !important; left: 0 !important; padding: 0 !important; z-index: 2000; margin: 0px !important; #top_menu{ background: rgb(255, 255, 255) !important; height: 100%; width: 100%; margin-right: auto !important; margin-left: 0 !important; transform: translateX(-100%); transition: all ease-in-out 0.2s; position: relative; z-index: 2; .nav-link{ padding-right: 25px; padding-left: 25px; text-align: left; padding-top: 10px; padding-bottom: 10px; } } } #wrapwrap{ .o_header_affix{ display: none; &.affixed{ display: block; } } } body.js-menu-opened #wrapwrap::before, #wrapwrap.js-menu-opened::before{ content: ''; position: absolute; z-index: 50; background: rgba(0, 0, 0,0.4); width: 100%; height: 100%; left: 0; top: 0; animation: fadeIn ease 1s; } .ks-header-8 > .container .navbar-collapse, .ks-header-6-main .navbar-collapse{ background: transparent !important; box-shadow: none !important; } .ks-header-8 > .container .navbar-collapse { margin-top: 0 !important; } .js-menu-opened{ #top_menu, #top_menu_collapse, #top_menu_collapse_clone { justify-content: start; } ul#top_menu{ height: 100%; justify-content: start !important; overflow: auto; display: block; } .list-unstyled { box-shadow: none !important; } .o_header_affix{ display: block; } .ks-header-3{ z-index: 1; } main:after{ display: none; } .ks-header-10 ~ .affixed .container { max-width: 100%; } .navbar-collapse.show{ #top_menu{ transform: translateX(0); } } .navbar{ background: transparent !important; box-shadow: none; } .affixed{ background: transparent !important; } .ks-header-2-main{ background: transparent !important; border-color: transparent !important; } .ks-search-position { z-index: 1 !important; } .ks-header-10 .ks-search-container-2, .ks_mycart, .ks-header-offer, .ks-header-4-topmost .ks-header-2-top, .ks-header-7-menus-inside, .ks-header-4-topmost .search_container { z-index: 1 !important; } header .navbar-brand.logo{ z-index: -1 !important; opacity: 0; transition: all ease-in-out 0.3s; } .ks-header-6 .ks-header-6-items, .ks-header-2 .ks-header-2-menu-icon{ opacity: 0; transition: all ease-in-out 0.5s; } .navbar-toggler{ position: fixed; right: 0px; top: 0px; z-index: 3; background: transparent; width: calc(100% - 280px); height: 100vh; max-height: 100vh; border-radius: 0px; &::before{ display: none; } .navbar-toggler-icon{ display: none; } } .ks-header-6-main .navbar-collapse{ margin: 0px; left: -20px; right: inherit; width: 100% !important; } .ks-header-5-main .container{ height: 35px; } .oe_search_button{ pointer-event: none; } } //js-menu-opened / end .o_affix_disabled .navbar .nav-item, .o_affix_enabled .navbar .nav-item { width: 100%; .nav-link{ padding-right: 25px; padding-left: 25px; text-align: left; padding-top: 10px; padding-bottom: 10px } } body.js-menu-opened{ .o_affix_disabled, .o_affix_enabled{ display: none; } } } @media (max-width: 540px){ .ks-header-5-search { bottom: -50px !important; padding: 0px !important; } } @media(max-width: 420px){ .remove_after_content a.dropdown-toggle{ max-width: 70px; } } .ks-header-offer.ks_header_menu_toggled{ z-index: 1 !important; display: none; } // Demo server issues fixing @media(max-width: 1200px){ .owl-carousel{ .owl-nav{ display: none; } } } .search_container { .easy-autocomplete-container { width: calc(100% - 10px); max-height: 80vh; overflow: auto; @media (max-width: 575px) { width: 100%; } @extend .scroll-style; ul { margin-bottom: 0px; } .eac-icon { margin-right: 10px; max-height: 60px; max-width: 60px; object-fit: contain; } li.selected { background-color: white; font-weight: bold; } .eac-item { display: flex !important; align-items: center; div { max-width: calc(100% - 120px); word-break: break-word; &:last-child { margin-left: auto; } } } } } body.o_connected_user{ #wrapwrap .o_header_affix{ top: 46px; } } #oe_main_menu_navbar { @media (max-width: 575px) { z-index: 10002; } } @media (min-width: 1025px) { .lang_dropdown { position: relative; &:hover { .js_language_selector.dropdown-menu { display: block; } } } .ks-price-list { &:hover { .dropdown-menu { display: block; } } } } @media(max-width: 440px){ .ks-header-6-search{ max-width: calc(100% - 50px); } } body.editor_enable.editor_has_snippets{ .o_affix_enabled, .o_affix_disabled { position: relative; z-index: inherit !important; } } #ks_reset_header, #ks_reset_footer{ margin-right: 10px; } header > .navbar > * .dropdown-menu { max-height: inherit; overflow-y: inherit; }