/* http://jsfiddle.net/jHeRm/4/ */ /* .menu > li { position: relative; } position relatvie on vertical accordion menu .ys-menu-accordion */ /* =Mega Block Menu ---------------------------- */ .ys-menu.dark .menu > li.menu-item > a:focus, .ys-menu.dark .menu > li.menu-item:hover > a, .ys-menu.dark .menu > .current_page_item > a, .ys-menu.dark .menu > .current_page_item > a:hover, .ys-menu.dark .menu > .current-menu-item > a, .ys-menu.dark .menu > .current-menu-item > a:hover { color: #FFF; } .ys-menu.dark .current_page_item > a, .ys-menu.dark .current_page_item > a:hover, .ys-menu.dark .current-menu-item > a, .ys-menu.dark .current-menu-item > a:hover { color: #FFF; } @media (min-width: 967px) { .ys-menu.ys-main-menu .menu > li > a { display: block; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; font-size: 16px; text-transform: uppercase; } .ys-menu.ys-main-menu.dark .menu > li > a { color: #b5bdc3; } .ltr .ys-menu.ys-main-menu .menu.hor > .menu-item { margin-right: 44px; } .rtl .ys-menu.ys-main-menu .menu.hor > .menu-item { margin-left: 44px; } .ys-menu.ys-main-menu .menu .menu-item-has-children > a i { border: 6px solid transparent; } .ys-menu.ys-main-menu .menu.hor > .menu-item-has-children > a i { border-top-color: #b5bdc3; margin-top: 9px; } .ltr .ys-menu .menu.hor > .menu-item-has-children > a i { margin-left: 8px; } .rtl .ys-menu .menu.hor > .menu-item-has-children > a i { margin-right: 8px; } .ltr .ys-menu .menu.hor .sub-menu .menu-item-has-children > a i, .ltr .ys-menu .menu.ver .menu-item-has-children > a i { margin-left: 25px; } .rtl .ys-menu .menu.hor .sub-menu .menu-item-has-children > a i, .rtl .ys-menu .menu.ver .menu-item-has-children > a i { margin-right: 25px; } .ys-menu .sub-menu .menu-item-has-children > a i { margin-top: 10px; } .ys-menu .menu.ver > .menu-item-has-children > a i { margin-top: 12px; } .ys-menu .menu.hor-right .sub-menu .menu-item-has-children > a i, .ys-menu .menu.ver-right .menu-item-has-children > a i { border-left-color: #E3E7EA; } .ys-menu .menu.hor-left .sub-menu .menu-item-has-children > a i, .ys-menu .menu.ver-left .menu-item-has-children > a i { border-right-color: #E3E7EA; } .dark .ys-menu .menu.hor-right .sub-menu .menu-item-has-children > a i, .dark .ys-menu .menu.ver-right .menu-item-has-children > a i { border-left-color: #b5bdc3; } .dark .ys-menu .menu.hor-left .sub-menu .menu-item-has-children > a i, .dark .ys-menu .menu.ver-left .menu-item-has-children > a i { border-right-color: #b5bdc3; } .ys-menu .menu.hor .sub-menu { padding: 20px 0; min-width: 180px; } *:not(.dark) .ys-menu .menu .sub-menu { background-color: #FFF; } *:not(.dark) .ys-menu .menu.hor .sub-menu { border: 1px solid #DCDCDC; box-shadow: 0 2px 4px -2px #d7dbdb; } .dark .ys-menu .menu.hor .sub-menu { padding: 0; box-shadow: 0 -26px 20px -4px #374E61 inset; border: 1px solid #303131; background-color: #384956; } .ys-menu .menu.hor .sub-menu a { font-size: 14px; line-height: 28px; } *:not(.dark) .ys-menu .menu .sub-menu a { color: #a1a1a1; } .dark .ys-menu .menu .sub-menu a { color: #b5bdc3; } .ys-menu .menu:not(.toggle) .sub-menu .menu-item a { padding: 0 25px; } .dark .ys-menu .menu:not(.toggle) .sub-menu .menu-item a { padding: 12px 25px; } .dark .ys-menu .menu.hor .sub-menu .menu-item, .dark .ys-menu .menu.ver:not(.toggle) .sub-menu .menu-item { border-bottom: 1px solid #282d31; box-shadow: 0 1px 0 0 #475765; } .dark .ys-menu .menu.hor .sub-menu .menu-item:last-child, .dark .ys-menu .menu.ver:not(.toggle) .sub-menu .menu-item:last-child { border-bottom: 0; box-shadow: none; } .ys-menu .sub-menu .menu-item-has-children > a:focus ~ .sub-menu, .ys-menu .sub-menu .menu-item-has-children:hover > .sub-menu { top: -1px; } .dark .ys-menu .sub-menu .menu-item-has-children > a:focus ~ .sub-menu, .dark .ys-menu .sub-menu .menu-item-has-children:hover > .sub-menu { top: -1px; } .dark .ys-menu .sub-menu .menu-item > a:focus, .dark .ys-menu .sub-menu .menu-item:hover > a { color: #FFF; } .ys-menu .menu.ver-left > .menu-item > .sub-menu { -webkit-transform: translateX(calc(-100% - 30px)); transform: translateX(calc(-100% - 30px)); } .ys-menu .menu.ver-right > .menu-item > .sub-menu { -webkit-transform: translateX(calc(100% + 30px)); transform: translateX(calc(100% + 30px)); } /* Menu Dock */ .ys-menu-dock .ys-menu .menu { position: relative; } .ys-menu-dock .ys-menu .menu > .menu-item-has-children > .sub-menu { margin-top: 65px; } .ys-menu-dock .ys-menu .menu > .menu-item-has-children > .sub-menu > i:before, .ys-menu-dock .ys-menu .menu > .menu-item-has-children > .sub-menu > i:after { position: absolute; top: -20px; content: ''; } .ys-menu-dock .ys-menu .menu > .menu-item-has-children > .sub-menu > i:before { border: 10px solid transparent; left: calc( 10% - 3px ); } .ys-menu-dock .ys-menu.dark .menu > .menu-item-has-children > .sub-menu > i:before { border-bottom-color: #303131; } .ys-menu-dock .ys-menu .menu > .menu-item-has-children > .sub-menu > i:after { margin-top: 4px; border: 8px solid transparent; left: calc( 10% - 1px ); } .ys-menu-dock .ys-menu.dark .menu > .menu-item-has-children > .sub-menu > i:after { border-bottom-color: #384956; } } @media only screen and (min-width: 769px) and (max-width: 1366px) { .ys-menu.ys-main-menu .menu > li > a { font-size: 15px; } } /* Tablet Landscape */ @media only screen and (min-width: 1022px) and (max-width: 1024px) { .ltr .ys-menu.ys-main-menu .menu.hor > .menu-item { margin-right: 26px; } .rtl .ys-menu.ys-main-menu .menu.hor > .menu-item { margin-left: 26px; } } .ys-menu .sub-menu a { -webkit-transition: background-color .25s ease-out; transition: background-color .25s ease-out; } /* Mobile Menu Skin */ @media (max-width: 967px) { .ys-menu.mobile-menu .sub-menu a { z-index: 999; border-bottom: 1px solid #2E363C; margin-bottom: 1px; box-shadow: 0 1px 0 0 #4D6478; } /* replace with icon and font-size */ .ys-menu .menu-item-has-children > a:not(.open) i:before { width: 3px; height: 11px; background: #FFF; margin-top: 24px; } .ltr .ys-menu .menu-item-has-children > a:not(.open) i:before { right: 29px; } .rtl .ys-menu .menu-item-has-children > a:not(.open) i:before { left: 29px; } .widget.ys-menu .menu-item-has-children > a:not(.open) i:before { background: #000; } .dark .ys-menu .menu-item-has-children > a:not(.open) i:before { background: #FFF; } .ys-menu .menu-item-has-children > a i:after { width: 11px; height: 3px; background: #FFF; margin-top: 28px; } .widget.ys-menu .menu-item-has-children > a i:after { background: #000; } .dark .ys-menu .menu-item-has-children > a i:after { background: #FFF; } .mobile-menu .menu-item > a { border-bottom: 1px solid #4a5b6b; box-shadow: 0 -1px 0 0 #161B20 inset; line-height: 55px; padding: 0 25px; color: #b5bdc3; } .ltr .mobile-menu .menu-item .menu-item > a { padding-left: 40px; } .ltr .mobile-menu .menu-item .menu-item .menu-item > a { padding-left: 55px; } .ltr .mobile-menu .menu-item .menu-item .menu-item .menu-item > a { padding-left: 70px; } .ltr .mobile-menu .menu-item .menu-item .menu-item .menu-item .menu-item > a { padding-left: 85px; } .rtl .mobile-menu .menu-item .menu-item > a { padding-right: 40px; } .rtl .mobile-menu .menu-item .menu-item .menu-item > a { padding-right: 55px; } .rtl .mobile-menu .menu-item .menu-item .menu-item .menu-item > a { padding-right: 70px; } .rtl .mobile-menu .menu-item .menu-item .menu-item .menu-item .menu-item > a { padding-right: 85px; } .sub-menu1 .sub-menu1 { background: #EFEFEF; } .sub-menu .sub-menu .sub-menu1 { background: #FFF; } .sub-menu .sub-menu .sub-menu .sub-menu1 { background: #EFEFEF; } .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu1 { background: #FFF; } .mobile-menu .sub-menu { background: #41505D; } .mobile-menu.ys-menu { background: #384550; height: calc(100% - 74px); /*min-height: 100%;*/ top: 74px; } .mobile-menu .sub-menu a { font-size: 16px; } .mobile-menu .menu > li > a { font-size: 18px; text-transform: none; } .mobile-menu-trigger { color: #FFF; margin: 0 !important; line-height: 62px; font-size: 28px; } .mobile-menu-wrapper > .row { padding: 2% 0; } .mobile-menu-wrapper .ys-logo { margin: 0 !important; } .ltr .mobile-menu-wrapper .ys-logo { float: left !important; margin-left: 10px !important; } .rtl .mobile-menu-wrapper .ys-logo { float: right !important; margin-right: 10px !important; } .mobile-menu-wrapper .ys-logo .text { font-size: 30px; margin-top: 5px; } .ltr .mobile-menu-wrapper .mobile-menu-trigger { margin-right: 10px !important; float: right !important; } .rtl .mobile-menu-wrapper .mobile-menu-trigger { margin-left: 10px !important; float: left !important; } }