Current Path : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/objects/ |
Current File : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/objects/_desktop-menu.scss |
@keyframes show-animation { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes hide-animation { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } .desktop-menu { .sm { position: relative; z-index: 9999; } .sm, .sm ul, .sm li { display: block; margin: 0; padding: 0; list-style: none; text-align: left; line-height: normal; direction: ltr; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sm-rtl, .sm-rtl ul, .sm-rtl li { text-align: right; direction: rtl; } .sm { > li { h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } } ul { display: none; } li, a { position: relative; } a { display: block; &.disabled { cursor: not-allowed; } } } // End Smartmenus Core .sm-simple { li { > a { padding: 13px 58px 13px 20px; } } a { &.current { background: #555; color: #fff; } &.disabled { color: #ccc; } } .children { a { .toggle-sub-menu { position: absolute; top: 50%; right: 0; &:before { right: 30px; } } } } } .toggle-sub-menu { position: relative; margin-left: 13px; &:before { @extend %FontAwesomeSolid; content: '\f078'; font-size: 8px; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); margin-top: -1px; } } .sub-arrow { display: none; } /* Switch to desktop layout ----------------------------------------------- These transform the menu tree from collapsible to desktop (navbar + dropdowns) -----------------------------------------------*/ /* start... (it's not recommended editing these rules) */ .sm-simple { ul { position: absolute; width: 12em; } &.sm-rtl { li { float: right; } } ul li, &.sm-rtl ul li, &.sm-vertical li { float: none; } a { white-space: nowrap; } ul a, &.sm-vertical a { white-space: normal; } .sm-nowrap:not(.mega-menu) > li > a, .sm-nowrap:not(.mega-menu) > li > :not(ul) a { white-space: nowrap; } } /* ...end */ .sm-simple { .scroll-up, .scroll-down { position: absolute; display: none; visibility: hidden; overflow: hidden; height: 20px; background: #fff; } .scroll-up-arrow, .scroll-down-arrow { position: absolute; top: -2px; left: 50%; overflow: hidden; margin-left: -8px; width: 0; height: 0; border-width: 8px; border-style: dashed dashed solid dashed; border-color: transparent transparent #555 transparent; } .scroll-down-arrow { top: 6px; border-style: solid dashed dashed dashed; border-color: #555 transparent transparent transparent; } &.sm-rtl { &.sm-vertical { .has-submenu { padding: 11px 20px; } } .toggle-sub-menu { margin-left: 0; margin-right: 13px; &:before { left: 0; right: auto; } } } &:not(.sm-vertical) { .has-mega-menu { position: static !important; .mega-menu { left: 0; right: 0 !important; margin-left: 0 !important; max-width: none !important; width: auto !important; } } } &.sm-vertical { display: block; .has-mega-menu { .mega-menu { max-width: calc(100vw - 394px) !important; width: 1170px !important; } } > li { display: block !important; width: 100%; > a { .menu-item-wrap { position: relative; } .toggle-sub-menu { position: static; &:before { right: 0; content: '\f107'; } } } } } } .menu--primary { text-align: center; line-height: 0; } .sm-simple { position: static; display: inline-block; > li { display: inline-block; } .children { padding: 18px 0 22px; min-width: 240px !important; border: 0; &.show-animation { animation: show-animation .25s; } &.hide-animation { animation: hide-animation .25s; } } .simple-menu { a { padding: 8px 30px; } .toggle-sub-menu { &:before { font-size: 8px; content: '\f054'; } } .menu-item-wrap { line-height: 0; } } .has-mega-menu { .scroll-up, .scroll-down { margin-left: 0 !important; } } .mega-menu { ul { position: static; display: block; width: auto; border: 0; background: transparent; box-shadow: none; } .menu { > li { > a { padding: 8px 0; } } } } } } .desktop-menu .sm-simple .mega-menu, .single-ic_mega_menu.elementor-page .page-content { padding: 30px 0 34px; } .desktop-menu .sm-simple .children, .single-ic_mega_menu .page-content { &:after { content: ''; height: 4px; position: absolute; bottom: 0; left: 0; right: 0; background: #111; } } .mobile-menu { .page-navigation-wrap, .page-navigation { display: none; } }