.secondary-menu-wrapper{ display: inline-block; position: relative; .secondary-title{ text-transform: uppercase; font-size: 0.93rem; padding: 0.77em 1.07em; font-weight: 700; color: #1e1e1e; position: relative; top: 1px; padding-left: 30px; cursor: pointer; &:after{ content:"\f0d7"; font-family: FontAwesome; color: #1e1e1e; right: 25px; position: absolute; top: 50%; transform:translateY(-50%); } } .secondary-menu-toggle{ width: 12px; display: inline-block; vertical-align: middle; margin-right: 5px; position: relative; top: -1px; .icon-bar{ width: 100%; display: block; margin-bottom: 2px; height: 2px; background-color: #000; &:last-child{ margin-bottom: 0; } } } + .menu-wrapper{ display: inline-block; &.menu-align-right{ float: right; } } .menu{ position: absolute; top: 120%; left: 0; z-index: 1000; width: 18em; background-color: white; text-align: left; border: 2px solid #e6e6e6; border-top: none; padding: 15px 0; visibility: hidden; opacity: 0; .transition(); >li{ padding: 0 30px; >a{ border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; padding-top: 15px; color: #1e1e1e; } &:first-child > a{ padding-top: 0; &:before{ margin-top: -16px !important; } } &:last-child >a{ border-bottom: none; padding-bottom: 0; &:before{ margin-top: -1px !important; } } } li.menu-label-new > a, li.menu-label-hot > a, li.menu-label-sale > a{ .label-text{ display: inline-block; color: #fff; font-size: 9px; margin-left: 5px; padding: 1px 3px; font-weight: 800; position: relative; top: -1px; text-transform: uppercase; } } li.menu-label-new{ > a{ .label-text{ background-color: #88b643; } } } li.menu-label-sale{ > a{ .label-text{ background-color: #e6bd47; } } } li.menu-label-hot{ > a{ .label-text{ background-color: #f54442; } } } li{ list-style: none; display: block; width: 100%; cursor: pointer; position: static; >a{ font-size: 13px; display: block; position: relative; } &.menu-disable_titles{ >a{ font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin-bottom: 0 !important; &:after{ display: none; } i{ font-size: 1.14rem !important; } } } .item-design2-image-no-borders { margin: -2.14em 0 0 0 !important; border:0 !important; -js-display: flex; display: flex !important; justify-content:center; .item-link { font-size: 0; text-align: center; align-self: center; img{ } } } &.menu-item-has-children{ >.nav-sublist-dropdown{ left: 100% !important; min-height: 100%; margin-left: 0 !important; top: -2px !important; margin-left: 0 !important; padding: 30px 30px 0 30px; border:2px solid @mainColor; } &:hover{ >.nav-sublist-dropdown{ display: block; } } >a:before{ content:"\f105"; font-family: FontAwesome; position: absolute; right: 0; top:50%; margin-top: -9px; } } .sidebar-widget{ margin-bottom: 0 !important; } } } .nav-sublist-dropdown{ margin-left: 0 !important; margin-top: 0 !important; .menu-item-has-children{ padding-bottom: 0; >a{ font-size: 16px; color: #000; text-transform: none; padding: 0; background-color: transparent; text-align: left; &:before, &:after{ display: none; } } &.item-level-1{ margin-bottom: 2.14em; >a{ padding-left: 0; padding-right: 0; text-transform: none; padding-bottom: 0; font-size: 16px; margin-bottom: 10px; font-weight: 700; &:hover{ background-color: transparent !important; } } &.with-border{ margin-bottom: 15px; .nav-sublist{ border-bottom: 1px solid #e6e6e6; padding-bottom: 5px; } } } .nav-sublist{ display: block !important; ul > li > a{ font-size: 13px; color: #4c4c4c; background-color: transparent !important; text-transform: none; padding: 10px 0; } } } ul > li ul{ position: static; border:none; padding: 0 !important; background-color: transparent !important; } ul > li > a{ font-size: 13px; color: #4c4c4c; background-color: transparent !important; text-transform: none; padding: 10px 0; } } .item-design-dropdown{ .nav-sublist-dropdown .menu-item-has-children.item-level-1:last-child{ border-bottom: none; margin-bottom: 20px; padding-bottom: 0; } } .item-design-mega-menu{ .nav-sublist-dropdown { .menu-widgets{ padding-left: 0; padding-right: 0; padding-top: 0; .banner{ visibility: visible; pointer-events: auto; } } } .nav-sublist-dropdown > .container > ul{ padding-top: 0; padding-bottom: 0; columns: 2; display: block; >li{ border-right: none; padding: 0 10px; float: left; width: 100%; display: inline-block; page-break-inside: avoid; border-bottom: none; clear:none !important; &.with-border{ margin-bottom: 15px; .nav-sublist{ border-bottom: 1px solid #e6e6e6; padding-bottom: 5px; } } &.menu-disable_titles{ >a{ font-size: 0 !important; line-height: 0 !important; padding: 0 !important; &:after{ display: none; } i{ font-size: 1.14rem !important; } } } } .item-level-1 > a{ padding-left: 0; padding-right: 0; text-transform: none; padding-bottom: 0; font-size: 16px; margin-bottom: 10px; } } &.columns-2{ .nav-sublist-dropdown > .container > ul{ column-width:462px; columns: 2; } } &.columns-3{ .nav-sublist-dropdown{ width: 670px !important; } .nav-sublist-dropdown > .container > ul{ column-width:670px; columns: 3; } } &.columns-4{ .nav-sublist-dropdown{ width: 800px !important; } .nav-sublist-dropdown > .container > ul{ column-width:800px; columns: 4; } } &.columns-5{ .nav-sublist-dropdown{ width: 800px !important; } .nav-sublist-dropdown > .container > ul{ column-width:800px; columns: 5; } } } } .header-color-white{ .secondary-title{ color: #fff; &:after{ color: #fff; } .secondary-menu-toggle .icon-bar{ background-color: #fff; } } } .et-secondary-shown, .et-secondary-visibility-opened{ .secondary-menu-wrapper{ .menu{ display: block; z-index: 1001; top:100%; visibility: visible; opacity: 1; filter: alpha(opacity=100); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } } } .et-secondary-visibility-on_hover{ .secondary-menu-wrapper:hover{ .menu{ visibility: visible; opacity: 1; filter: alpha(opacity=100); top: 100%; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } } } .et-secondary-visibility-opened.et-secondary-on-home{ .secondary-menu-wrapper{ .menu{ visibility: hidden; opacity: 0; } } .secondary-menu-wrapper:hover, &.home .secondary-menu-wrapper{ .menu{ visibility: visible; opacity: 1; filter: alpha(opacity=100); top: 100%; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } } } .et-secondary-darkerning-on{ &:before{ content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: -1; visibility: hidden; opacity: 0; .transition(); } } .et-secondary-darkerning-on{ position: relative; &.admin-bar .demo_store{ top: 0px; } &.et-secondary-shown{ &:before{ visibility: visible; opacity: 1; z-index: 1002; display: block; } .page-wrapper{ z-index: auto; } .header-wrapper{ z-index: 1003; } } }