/* MegaMenu ------------------*/ .so-megamenu .container .container {width: auto !important;} .so-megamenu .navbar-header{margin:0px;display:none;} .so-megamenu .navbar-default{background: transparent;} #menu { position: relative; overflow: visible; } #menu .background-menu { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } #megaMenuToggle { display: none; } .container-megamenu, .container-megamenu .container { padding-left: 0px ; padding-right: 0px ; width:auto; } .megamenu-wrapper { position: relative; } .megamenu-pattern { } ul.megamenu { margin: 0px; padding: 0px; list-style: none; position: relative; } ul.megamenu > li { float: left; margin-right:1px; } ul.megamenu > li.pull-right { float: right; } ul.megamenu > li .close-menu { display: none; } /* Search */ ul.megamenu > li.search { background: none; } #top ul.megamenu > li.search .search_form, ul.megamenu > li.search .search_form { padding: 0px; margin: 8px; } #top ul.megamenu > li.search .search_form input, ul.megamenu > li.search .search_form input { height: 29px; min-height: 29px; border: none; } ul.megamenu > li.search .button-search2 { top: 6px; right: 8px; } ul.megamenu > li > a { display: block; position: relative; color: #fff; font-size: 14px; padding: 15px 18px ; } ul.megamenu > li > a strong { font-weight: 400; } ul.megamenu > li > a:hover, ul.megamenu > li.active > a, ul.megamenu > li.home > a, ul.megamenu > li:hover > a { /* Old browsers */ color: white; } ul.megamenu > li > a > .icon-home { display: block; font-size: 23px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); } ul.megamenu > li > a img { margin-right: 5px; } ul.megamenu > li > a.description { font-size: 14px; padding: 10px 20px 11px 21px; line-height: 1; } ul.megamenu > li > a.description img { float: left; } ul.megamenu > li > a.description .description { font-size: 11px; opacity: 0.9; } ul.megamenu > li > a.description .description-left { float: left; width: auto; } /* Submenu */ ul.megamenu li .sub-menu .content .static-menu a.main-menu, ul.megamenu .title-submenu{ display: block; font-weight: bold; font-size: 16px; color: #222; padding-bottom:10px; text-transform:uppercase; } ul.megamenu > li > .sub-menu { position: absolute; z-index: 9999; display: none; padding-top: 8px; } .horizontal ul.megamenu > li > .sub-menu { max-width: 100%; } ul.megamenu .sub-menu .content { display: none; padding: 20px; background: #fff; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); } ul.megamenu .sub-menu .content > .row { padding-top: 20px; } ul.megamenu .sub-menu .content > .border { padding-top: 20px; border-bottom: 1px solid #e6e6e6; } ul.megamenu .sub-menu .content > .row:first-child { padding: 0px; } ul.megamenu .sub-menu .content ul.row-list{margin:0; padding:0; list-style: none;} /* Product */ ul.megamenu li .product { text-align: center; position: relative; margin-bottom: -7px; } ul.megamenu li .product .image { padding: 0px; } ul.megamenu li .product .image img { border: 1px solid #e6e6e6; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } ul.megamenu li .product .name { padding: 7px 0px 0px 0px; } ul.megamenu li .product .price { color: #ff6b6b; } /* Manufacturer */ ul.manufacturer { list-style: none; margin: -10px 0px 0px 0px !important; padding: 0px; position: relative; } ul.manufacturer li { display: inline-block; margin: 10px 5px 0px 0px; } ul.manufacturer li a { display: block; font-size: 14px; padding: 2px 8px; border: 1px solid #e6e6e6; } /* Static Menu */ ul.megamenu li .sub-menu .content .static-menu .menu ul { list-style: none; margin: 0px 0 15px; padding:0; } ul.megamenu li .sub-menu .content .static-menu > .menu > ul > li { padding-top: 7px; } ul.megamenu li .sub-menu .content .static-menu > .menu > ul > li:first-child { padding-top: 0px; } /* Hover Menu */ ul.megamenu li .sub-menu .content .hover-menu a.main-menu { display: block; } ul.megamenu li .sub-menu .content .hover-menu .menu ul { list-style: none; margin: 3px 0px; padding: 0px; position: relative; } ul.megamenu li .sub-menu .content .hover-menu .menu ul ul { display: none; margin-top: -41px; width: 200px; padding: 20px; position: absolute; z-index: 10; left: 100%; background: #fff; border: 1px solid #e6e6e6; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); } ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:before { position: absolute; display: block; border-color: transparent; border-style: solid; border-width: 10px; content: ""; top: 20px; left: -11px; border-right-color: #e6e6e6; border-left-width: 0; } ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:after { position: absolute; display: block; border-color: transparent; border-style: solid; border-width: 10px; content: ""; top: 20px; left: -10px; border-right-color: #fff; border-left-width: 0; } ul.megamenu li .sub-menu .content .hover-menu .menu ul ul li { position: relative; } /* Heading MegaMenu */ #megaMenuToggle { display: none; cursor: pointer; } .megamenuToogle-wrapper { background: #444; } .megamenuToogle-wrapper .container { color: #fff; font-size: 16px; padding:13px 15px; width:auto; } .megamenuToogle-wrapper .container > div { float: left; width: 15px; margin: 3px 10px 0px 0px; } .megamenuToogle-wrapper .container > div span { display: block; width: 100%; height: 3px; margin-top: 2px; background: #fff; } /* Megamenu vertical */ .so-vertical-menu .vertical-wrapper { width: 100%; background: white; display:none; position: absolute; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; z-index: 650; border-left: 1px solid #ddd; } @media (max-width: 991px){ .so-vertical-menu .vertical-wrapper{ position:fixed; width:280px; } } .vertical #menuHeading { margin: 0px; } .vertical li.loadmore{ border-top: 1px solid #ddd; padding: 11px 15px; } .vertical li.loadmore i{ padding-right: 10px; font-size:15px; } .vertical span.more-view { cursor: pointer; font-size: 14px; } .vertical .megamenuToogle-wrapper { z-index: 3; cursor: pointer; } .vertical .megamenu-wrapper { display: block !important; background: #fff !important; border: 1px solid #e6e6e6; position: relative; z-index: 2; margin-top: -2px; } .vertical ul.megamenu > li { display: block; float: none !important; width: auto; background: none; border-top: 1px solid #e6e6e6; position: relative; margin: 0px -1px; } .vertical ul.megamenu > li.home, .vertical ul.megamenu > li.search { display: none; } .vertical ul.megamenu > li > a { padding: 11px 15px ; color: #666; } .vertical ul.megamenu > li.active > a { /*background: #f6f6f6 ;*/ } .vertical ul.megamenu > li > a.description { padding: 12px 20px 12px 21px; } .vertical ul.megamenu > li.click:before, .vertical ul.megamenu > li.hover:before { font-weight: normal; font-style: normal; text-decoration: inherit; color: #51cfc6; font-weight: 400; font-size: 14px; position: absolute; right: 0; z-index: 10; padding: 14px 15px 10px 50px; } /* SubMenu */ .vertical ul.megamenu > li > .sub-menu { left: 100%; padding-top: 0px; top: 0; } .vertical ul.megamenu > li > .sub-menu > .content { } .megamenu .label { background: #d5375f none repeat scroll 0 0; color: #fff; font-size: 10px; line-height: 17px; padding: 0 5px; position: absolute; text-transform: none; top: -5px; right:0; } /*.megamenu i { padding-right: 12px; }*/ /* Responsive ------------------*/ @media (max-width: 991px) { /* MegaMenu Vertical */ .so-megamenu .navbar-header {display:block;} .so-megamenu .navbar-default .navbar-toggle .icon-bar { background-color: #B1B1B1;} .navbar-header .navbar-toggle { display: inline-block; border: none; } .navbar-header .fa-list-alt{ font-size:32px;color:#eee;vertical-align: middle;padding:0; border:none; } .navbar-header .fa-list-alt:hover{background:none; !important;} .responsive .vertical #menuHeading { margin: 20px 0px 0px 0px; } .responsive .vertical ul.megamenu > li > .sub-menu { left: 0; top: auto; width: 100% !important; } .responsive .vertical ul.megamenu > li > .sub-menu > .content { margin-left: 0px; } /* Submenu */ ul.megamenu li .sub-menu .content { border: none; border-radius: none; box-shadow: none; } .responsive .vertical ul.megamenu li .sub-menu .content .hover-menu .menu ul ul { display: block !important; margin: 5px 10px; width: auto; padding: 0px; position: static; left: 0; background: none; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .responsive .vertical ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:before { display: none; } .responsive .vertical ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:after { display: none; } .responsive .vertical ul.megamenu li .sub-menu .content .hover-menu a.main-menu:before { display: none; } .responsive .vertical .visible { padding: 5px 0px 5px 0px !important; } .responsive .vertical .visible > div { margin: 0px !important; border: none !important; padding: 0px !important; padding-left: 20px !important; } /* MegaMenu Submenu */ .responsive ul.megamenu .sub-menu .content .border { display: none; } .responsive ul.megamenu .sub-menu .content { padding: 10px ; } .responsive ul.megamenu .sub-menu .content .row > div { margin-top: 10px; } .responsive ul.megamenu .sub-menu .content .row:first-child > div:first-child { margin-top: 0px; border-top: none; padding-top: 0px; } } @media (max-width: 991px) { .responsive #megaMenuToggle { display: block; } .responsive ul.megamenu > li { display: block; float: none !important; width: auto; background: none; border-top: 1px solid #e6e6e6; position: relative; margin: 0px -1px; } ul.megamenu > li.search ,.fa-angle-right,.caret { display: none; } .responsive ul.megamenu > li > a { text-shadow: none; color:#666 !important; padding:10px; height: auto; } .responsive ul.megamenu > li.active > a, .responsive ul.megamenu > li.home > a, .responsive ul.megamenu > li.hover > a{ background: #eee ; } .responsive ul.megamenu > li.hover > a { background: none; } .responsive ul.megamenu > li.click:before, .responsive ul.megamenu > li.hover:before { content: "\f067"; font-family: FontAwesome; color: #51cfc6; font-weight: 400; font-size: 16px; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; cursor: pointer; } .responsive ul.megamenu > li.active .close-menu { display: block; position: absolute; z-index: 10; top: 0; right: 1px; margin:0; padding: 10px 14px ; background: #f6f6f6; text-align: center; cursor: pointer; } .responsive ul.megamenu > li.active .close-menu:before { content: "\f068"; font-family: FontAwesome; color: #51cfc6; font-weight: 400; font-size: 18px; } /* Submenu */ .responsive .horizontal ul.megamenu > li > .sub-menu { width: 100% !important; } /* Hover Menu */ .responsive .horizontal ul.megamenu li .sub-menu .content .hover-menu .menu ul ul { display: block !important; margin: 5px 10px; width: auto; padding: 0px; position: static; left: 0; background: none; border: none; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .responsive .horizontal ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:before { display: none; } .responsive .horizontal ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:after { display: none; } .responsive .horizontal ul.megamenu li .sub-menu .content .hover-menu a.main-menu:before { display: none; } .responsive .horizontal .visible { padding: 5px 0px 5px 0px !important; } .responsive .horizontal .visible > div { margin: 0px !important; border: none !important; padding: 0px 0px 0px 10px !important; } } @media (min-width: 961px) { .megamenu-wrapper { display: block !important; } } @media (max-width: 991px) { .megamenu .label { display:none; } ul.megamenu > li > .sub-menu { position: relative; } .megamenu-wrapper { position: fixed; top: 0px; left: 0; background-color: #fff; height:100%; width: 280px; padding: 10px; z-index: 999; overflow-x: hidden; overflow-y: auto; visibility: hidden; -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; border: 1px solid #e6e6e6; } .vertical-wrapper { position: fixed; top: 0px; left: 0; background-color: #fff; bottom: 0px; width: 280px; padding: 10px; z-index: 999999; overflow-x: hidden; overflow-y: auto; visibility: hidden; -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; border: 1px solid #e6e6e6; } .vertical #menuHeading{ display:none; } } .so-megamenu-active { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #remove-megamenu { padding: 10px; z-index: 10; cursor: pointer; visibility: hidden; font-size:20px; text-align: right; display:none; } .so-megamenu-active #remove-megamenu { visibility: visible; display:block; } .so-vertical-active { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #remove-verticalmenu { padding: 10px; z-index: 10; cursor: pointer; display: none; font-size:20px; text-align: right; } .so-vertical-active #remove-verticalmenu { display: block; } .navbar-header .navbar-toggle{float:none;} .subcategory li{ list-style-type: none; list-style:none; } .subcategory li a{ float:left; width:100%; text-align:left; }