trAvis - MANAGER
Edit File: plus-mobile-menu.css
/*mobile menu*/ .tp-mobile-menu, .tp-mobile-menu.show, .tp-mm-wrapper, .tp-mobile-menu .tp-mm-et-wrapper { position: relative; display: flex !important; align-items: center; } .tp-mobile-menu { height: 100%; } .tp-mm-wrapper .tp-mm-wrapper-inner { position: relative; display: flex; width: 100% } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-ul,.tp-mm-et-wrapper .tp-mm-et-ul { display: flex; padding: 0; margin: 0 } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li, .tp-mm-et-wrapper .tp-mm-et-ul .tp-mm-et-li, .tp-mobile-menu .tp-mm-l-wrapper .tp-mm-li, .tp-mobile-menu .tp-mm-r-wrapper .tp-mm-li, .tp-mobile-menu .tp-mm-c-wrapper .tp-mm-li, .tp-mobile-menu.style_2 .tp-mm-c-wrapper .tp-mm-c-et-li { position: relative; display: flex; list-style: none; flex-direction: column; justify-content: center; overflow: visible; cursor: pointer; text-align: center; padding: 0; margin: 0; width: auto; height: auto; padding: 0 1px; max-width: 70px; max-height: 70px; min-width: 70px; min-height: 70px; } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li.grid-item, .tp-mm-et-wrapper .tp-mm-et-ul .tp-mm-et-li, .tp-mobile-menu .tp-mm-l-wrapper .tp-mm-li.grid-item, .tp-mobile-menu .tp-mm-r-wrapper .tp-mm-li.grid-item, .tp-mobile-menu.style_2 .tp-mm-c-wrapper .tp-mm-c-et-li{ max-width: unset; max-height: unset; min-width: unset; min-height: unset; } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li .tp-menu-link { position: relative; display: flex; list-style: none; flex-direction: column; overflow: hidden; width: 100%; outline: none; text-align: center; justify-content: center; align-items: center; } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li i,.tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li .tp-mm-st1-title,.tp-mm-et-wrapper .tp-mm-et-li i,.tp-mm-et-wrapper .tp-mm-et-li .tp-mm-extra-toggle { text-align: center; width: 100% } .tp-mobile-menu .tp-mm-li i,.tp-mm-c-wrapper i,.tp-mm-et-wrapper .tp-mm-et-li i { font-size: 16px; color: #000 } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-li .tp-mm-st1-title,.tp-mm-et-wrapper .tp-mm-et-li .tp-mm-extra-toggle { padding: 0; margin-top: 5px; color: #000 } .tp-mobile-menu.tp-column-base { height: auto } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-ul.tp-row { width: 100%; } .tp-mm-wrapper .tp-mm-wrapper-inner .tp-mm-ul.tp-row .tp-mm-li { margin: 0; max-width: inherit; min-width: inherit } .tp-mobile-menu.style_1.tpet-on .tp-mm-wrapper { width: 80%; } .tp-mobile-menu.style_1.tpet-on .tp-mm-et-wrapper { width: 20%; height: auto; } .tp-mobile-menu.style_1.tpet-on.tp-column-base { width: auto; max-width: inherit; min-width: auto } .tp-column-base .tp-mm-et-wrapper .tp-mm-et-ul { width: 100%; } .tp-column-base .tp-mm-et-wrapper .tp-mm-et-ul .tp-mm-et-li { width: 100%; max-width: 100%; min-width: 100%; height: 100%; } .tp-mobile-menu.tp-column-base .tp-mm-li.grid-item.tp-mm-eq-col { justify-content: space-between; flex-wrap: wrap; flex: 1; } .tp-mobile-menu ul { margin: 0; padding: 0; height: 100%; width: 100%; position: relative; display: flex; } .tp-mobile-menu .tp-mm-c-et-ul { align-items: center; text-align: center; justify-content: center } .tp-mobile-menu .tp-loop-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; min-height: 100%; background: #d5d4de; padding: 0 0; } .tp-mobile-menu .tp-menu-link { width: 100%; position: relative; display: flex; margin: 0 auto; flex-direction: column; height: 100%; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px; min-height: 70px; } .tp-mobile-menu .tp-loop-inner .tp-mm-img { width: 30px; position: relative; display: flex; margin: 0 auto } .header-extra-toggle-click { cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .tp-mobile-menu.tpet-on .header-extra-toggle-content { background: #fff none repeat scroll 0 0; height: 100%; position: fixed; text-align: left; top: 0; max-width: 400px; width: 100%; z-index: 15; overflow-y: auto; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; -webkit-overflow-scrolling: touch } .admin-bar .tp-mobile-menu.tpet-on .header-extra-toggle-content { top: 32px; height: calc(100% - 32px) } .tp-mobile-menu.tpet-on .header-extra-toggle-content.right { right: 0; -webkit-transform: translate(100%,0); -ms-transform: translate(100%,0); transform: translate(100%,0); -o-transform: translate(100%,0); transform: translate(100%,0) } .tp-mobile-menu.tpet-on .header-extra-toggle-content.left { left: 0; -webkit-transform: translate(-100%,0); -ms-transform: translate(-100%,0); transform: translate(-100%,0); -o-transform: translate(-100%,0); transform: translate(-100%,0) } .tp-mobile-menu.tpet-on .header-extra-toggle-content.top { top: 0; left: 0; right: 0; height: 100%; max-height: 300px; width: 100%; max-width: 100%; -webkit-transform: translate(0,-100%); -ms-transform: translate(0,-100%); transform: translate(0,-100%); -o-transform: translate(0,-100%); transform: translate(0,-100%) } .admin-bar .tp-mobile-menu.tpet-on .header-extra-toggle-content.top { top: 32px } .tp-mobile-menu.tpet-on .header-extra-toggle-content.bottom { top: auto; bottom: 0; left: 0; right: 0; height: 100%; max-height: 300px; width: 100%; max-width: 100%; -webkit-transform: translate(0,100%); -ms-transform: translate(0,100%); transform: translate(0,100%); -o-transform: translate(0,100%); transform: translate(0,100%) } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open { visibility: visible; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); -webkit-overflow-scrolling: touch } .tp-mobile-menu.tpet-on .header-extra-toggle-content.right.open { right: 0 } .tp-mobile-menu.tpet-on .header-extra-toggle-content.left.open { left: 0 } .tp-mobile-menu.tpet-on .header-extra-toggle-content.full-width-content { width: 100%; height: 100%; max-width: 100%; max-height: 100% } .admin-bar .tp-mobile-menu.tpet-on .header-extra-toggle-content.full-width-content { top: 32px; height: calc(100% - 32px) } .tp-mobile-menu.tpet-on .extra-toggle-content-overlay { background: #202020 none repeat scroll 0 0; height: 100%; opacity: 0; position: fixed; left: 0; top: 0; visibility: hidden; z-index: 12; width: 100%; cursor: pointer; -webkit-transition: color .4s linear,background .3s linear; -moz-transition: color .4s linear,background .3s linear; -ms-transition: color .4s linear,background .3s linear; -o-transition: color .4s linear,background .3s linear; transition: color .4s linear,background .3s linear } .tp-mobile-menu.tpet-on .extra-toggle-content-overlay.open { cursor: url(../../plugins/theplus_elementor_addon/assets/images/overlay-close-icon.png),pointer; filter: alpha(opacity=60); opacity: .7; z-index: 12; visibility: visible; -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s } .tp-mobile-menu.tpet-on .extra-toggle-close-menu,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto { position: absolute; width: 40px; height: 40px; border-radius: 3px; background: red; box-shadow: 0 2px 10px -2px rgba(0,0,0,.37); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 11; cursor: pointer } .tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto { background: none; box-shadow: unset; width: 100%; height: 100% } .tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto.tp-mm-ca { opacity: 1; visibility: visible; z-index: 125 } .tp-mobile-menu .tp-menu-link.tp-mm-ca { z-index: 125 } .tp-mobile-menu .tp-menu-link.tp-mm-ca i,.tp-mobile-menu .tp-menu-link.tp-mm-ca span { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto.tp-mm-ca:before,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto.tp-mm-ca:after { background: black } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-top-left { left: 5px; top: 5px } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-top-right { right: 5px; top: 5px } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-top-center { left: 0; right: 0; top: 5px; margin: 0 auto } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-bottom-left { left: 5px; bottom: 5px } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-bottom-right { right: 5px; bottom: 5px } .tp-mobile-menu.tpet-on .extra-toggle-close-menu.mm-ci-bottom-center { left: 0; right: 0; bottom: 5px; margin: 0 auto } .tp-mobile-menu .extra-toggle-close-menu.mm-ci-auto { display: none } .tp-mobile-menu .tp-mm-et-li .extra-toggle-close-menu-auto,.tp-mobile-menu .tp-mm-c-wrapper .extra-toggle-close-menu-auto { opacity: 0; visibility: hidden } .tp-mobile-menu.tpet-on .extra-toggle-close-menu:before,.tp-mobile-menu.tpet-on .extra-toggle-close-menu:after,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto:before,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto:after { content: ''; position: absolute; background: #fff; width: 25px; height: 2px; top: 50%; -webkit-transform: rotate(45deg) translate3d(-50%,-50%,0); -moz-transform: rotate(45deg)translate3d(-50%,-50%,0); -ms-transform: rotate(45deg) translate3d(-50%,-50%,0); -o-transform: rotate(45deg) translate3d(-50%,-50%,0); transform: rotate(45deg) translate3d(-50%,-50%,0); left: 50%; transform-origin: left center; border-radius: 2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .tp-mobile-menu.tpet-on .extra-toggle-close-menu:after,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto:after { -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(-45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(-45deg); -o-transform: translate3d(-50%,-50%,0) rotate(-45deg); transform: translate3d(-50%,-50%,0) rotate(-45deg); transform-origin: center center } .tp-mobile-menu.tpet-on .extra-toggle-close-menu:hover:before,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto:hover:before { -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(-45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(-45deg); -o-transform: translate3d(-50%,-50%,0) rotate(-45deg); transform: translate3d(-50%,-50%,0) rotate(-45deg); transform-origin: center } .tp-mobile-menu.tpet-on .extra-toggle-close-menu:hover:after,.tp-mobile-menu.tpet-on .extra-toggle-close-menu-auto:hover:after { -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); -moz-transform: translate3d(-50%,-50%,0) rotate(45deg); -ms-transform: translate3d(-50%,-50%,0) rotate(45deg); -o-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); transform-origin: center } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open .elementor-element { margin-top: 10px } .tp-mobile-menu.tpet-on .mm-ett-style-2:after { content: ""; position: absolute; width: 100%; border-bottom-right-radius: 50%; top: 0; height: 100%; transform-origin: top right; -webkit-transform: scale(1) translate(-50%,-50%); transform: scale(1) translate(-50%,-50%); transition: transform 0.5s cubic-bezier(.755,.05,.855,.06) 0.5s,-webkit-transform 0.5s cubic-bezier(.755,.05,.855,.06) 0.5s,border-radius 0.5s cubic-bezier(.755,.05,.855,.06) 0.5s; will-change: transform; background: #fff; } .tp-mobile-menu.tpet-on .right.mm-ett-style-2:after{ border-bottom-right-radius: 0; border-bottom-left-radius: 50%; -webkit-transform: scale(1) translate(50%,-50%); transform: scale(1) translate(50%,-50%); } .tp-mobile-menu.tpet-on .top.mm-ett-style-2:after{ border-bottom-left-radius: 50%; -webkit-transform: scale(1); transform: scale(1); } .tp-mobile-menu.tpet-on .bottom.mm-ett-style-2:after{ border-bottom-right-radius: 0; border-top-right-radius: 50%; border-top-left-radius: 50%; -webkit-transform: scale(1); transform: scale(1); } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open:after { -webkit-transform: scale(1) translate(0,0); transform: scale(1) translate(0,0); backface-visibility: hidden; border-bottom-right-radius: 0; transition: transform 0.5s cubic-bezier(.755,.05,.855,.06),-webkit-transform 0.5s cubic-bezier(.755,.05,.855,.06),border-radius 0.3s cubic-bezier(.755,.05,.855,.06) 0.25s; } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open.right:after,.tp-mobile-menu.tpet-on .header-extra-toggle-content.open.top:after { border-bottom-left-radius: 0; } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open.bottom:after{ border-top-right-radius: 0; border-top-left-radius: 0; } .header-extra-toggle-content.mm-ett-style-2 .tp-con-open-st2{ overflow-x: hidden; position: relative; width:100%; height:100%; z-index: 1; } .tp-mobile-menu.tpet-on .header-extra-toggle-content.mm-ett-style-2.open section.elementor-element, .tp-mobile-menu.tpet-on .header-extra-toggle-content.mm-ett-style-2.open .extra-toggle-close-menu { -webkit-animation: 0.75s linear 0s normal forwards 1 tpmmtempst2 !important; animation: 0.75s linear 0s normal forwards 1 tpmmtempst2 !important; } @keyframes tpmmtempst2{0% { opacity:0;}66% { opacity:0;}100% { opacity:1;transform: translateX(0); } }@-webkit-keyframes tpmmtempst2{0% { opacity:0;}66% { opacity:0;}100% { opacity:1;transform: translateX(0); } } .tp-mobile-menu .header-extra-toggle-content .elementor .elementor-element { z-index: 1; background: transparent!important } .tp-mobile-menu.tpet-on .header-extra-toggle-content.mm-ett-style-2::-webkit-scrollbar { width: 0; background: transparent } .tp-mobile-menu.tpet-on .header-extra-toggle-content.mm-ett-style-2 { opacity: 0; visibility: hidden; background: transparent } .tp-mobile-menu.tpet-on .header-extra-toggle-content.open.mm-ett-style-2 { opacity: 1; visibility: visible; } .tp-mobile-menu.tpet-on .header-extra-toggle-content.tp-of-h { overflow-y: hidden!important } .header-extra-toggle-content.mm-ett-style-2.bottom { bottom: -18px!important } .tp-mobile-menu .tp-mm-li.active:before,.tp-mobile-menu .tp-mm-li.active:after { width: 50%; content: ''; display: flex; position: absolute; z-index: 11; left: 0; right: 0; margin: 0 auto } .tp-mobile-menu .tp-mm-li.indi-top.active:before { border-top: 3px solid red; top: 0 } .tp-mobile-menu .tp-mm-li.indi-bottom.active:after { border-top: 3px solid red; bottom: 0 } .tp-mobile-menu .tp-mm-li.dot.active .tp-menu-link:after { content: "\A"; width: 10px; height: 10px; border-radius: 50%; background: red; display: flex; align-items: center; text-align: center; justify-content: center; margin: 0 auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) } .tp-mobile-menu.tp-mm-fix { position: fixed; list-style: none; padding: 0; margin: 0; z-index: 14; left: 0; width: 100%; right:0; } .tp-mobile-menu.tp-mm-fix.top { top: 0 } .tp-mobile-menu.tp-mm-fix.bottom { bottom: 0 } .tp-mobile-menu .tp-mm-st1-title { width: 100% } .tp-mobile-menu.scroll-view { opacity: 0; visibility: hidden } .tp-mobile-menu.scroll-view.show { opacity: 1; visibility: visible; transition: all 0.3s cubic-bezier(.5,.12,.46,.88) } .tp-mobile-menu .tp-loop-inner:after { position: absolute; right: -10px; top: 5px; background: black; padding: 5px 8px; border-radius: 25px; font-size: 10px; color: #fff9f9; z-index: 11 } .tp-mobile-menu.style_1,.tp-mobile-menu.style_1 .tp-mm-wrapper { width: 100%; height: auto; } .tp-mobile-menu.style_1 .tp-mm-wrapper .tp-mm-wrapper-inner.swiper-wrapper { width: 3000px!important; white-space: nowrap } .tp-mobile-menu.style_2 .tp-mm-l-wrapper-inner.swiper-wrapper,.tp-mobile-menu.style_2 .tp-mm-r-wrapper-inner.swiper-wrapper { width: 3000px!important; white-space: nowrap; text-align: left; align-items: center; justify-content: center; display: flex } .tp-mobile-menu.style_2.tpet-on .tp-mm-l-wrapper,.tp-mobile-menu.style_2.tpet-on .tp-mm-r-wrapper,.tp-mobile-menu.style_2.tpet-on .tp-mm-c-wrapper { position: relative; display: block; width: 100%; } .tp-mobile-menu.style_2 .tp-mm-l-wrapper,.tp-mobile-menu.style_2 .tp-mm-r-wrapper { width: 50% } .tp-mobile-menu.style_2.tpet-on .tp-mm-l-wrapper,.tp-mobile-menu.style_2.tpet-on .tp-mm-r-wrapper { width: 40% !important; height: 100%; } .tp-mobile-menu.style_2.tpet-on .tp-mm-c-wrapper { width: 20%; } .tp-mobile-menu.style_2.tpet-on .tp-mm-c-wrapper { padding: 0; margin: 0; } .tp-mobile-menu .tp-mm-l-wrapper-inner,.tp-mobile-menu .tp-mm-r-wrapper-inner,.tp-mobile-menu.style_2 .tp-mm-c-wrapper { position: relative; width: 100%; height: 100% } .tp-mobile-menu.style_2 .tp-mm-l-wrapper i,.tp-mobile-menu.style_2 .tp-mm-r-wrapper i,.tp-mobile-menu.style_2 .tp-mm-c-wrapper i { text-align: center; width: 100% } .tp-mobile-menu.style_2 .tp-mm-st1-title,.tp-mobile-menu.style_2 .tp-mm-extra-toggle { padding: 0; color: #000; position: relative } .tp-mobile-menu.style_2 .tp-mm-c-wrapper,.tp-mobile-menu.style_2 .tp-mm-l-wrapper,.tp-mobile-menu.style_2 .tp-mm-r-wrapper { justify-content: center; margin: 0 auto; text-align: center; overflow: hidden; } .tp-mobile-menu.style_2 .tp-mm-l-wrapper .tp-mm-li,.tp-mobile-menu.style_2 .tp-mm-r-wrapper .tp-mm-li { height: 100%; } .tp-mobile-menu .tp-mm-c-wrapper .tp-loop-inner,.tp-mobile-menu .tp-mm-et-wrapper .tp-loop-inner{ background: transparent !important; border: none !important; box-shadow: none !important; } .tp-mobile-menu .tp-mm-c-wrapper,.tp-mobile-menu .tp-mm-c-wrapper .tp-loop-inner,.tp-mobile-menu .tp-mm-et-wrapper { background: #d5d5de; } .tp-mobile-menu .tp-mm-et-li { margin: 0 auto !important; } .tp-mobile-menu .tp-mm-et-li,.tp-mobile-menu .tp-mm-c-et-li { width: 100% !important; } .tp-mobile-menu.style_2.tp-mm-fix.bottom,.tp-mobile-menu.style_2.tp-mm-fix.top { height: auto; }