trAvis - MANAGER
Edit File: plus-circle-menu.css
/*---- circle menu ----*/ .plus-circle-menu-wrapper { position: relative; display: block; width: 100%; } .plus-circle-menu-wrapper.layout-straight { position: relative; display: block; width: 100%; } .plus-circle-menu-inner-wrapper .plus-circle-menu-list a { border-radius: 25px; font-size: 20px; background-color: #8072fc; padding:0; } .plus-circle-menu-inner-wrapper .circle_menu_position_abs{ position:absolute; top:0; left:0; right:auto; list-style: none; padding: 0; margin: 0; z-index:11; } .plus-circle-menu-inner-wrapper .circle_menu_position_fix{ position:fixed; top:0; left:0; right:auto; list-style: none; padding: 0; margin: 0; z-index:11; } .plus-circle-menu-wrapper .plus-circle-menu-inner-wrapper .plus-circle-main-menu-list .plus-circle-menu-list{ -webkit-transition: all 1000ms ease 0s; -moz-transition: all 1000ms ease 0s; -o-transition: all 1000ms ease 0s; transition: all 1000ms ease 0s; } .plus-circle-menu-wrapper .plus-circle-menu-inner-wrapper li.plus-circle-menu-list { display: inline-block; -webkit-transition: all 1000ms ease 0s; -moz-transition: all 1000ms ease 0s; -o-transition: all 1000ms ease 0s; transition: all 1000ms ease 0s; } .plus-circle-menu-wrapper .plus-circle-menu-list a ,.plus-circle-menu-wrapper .plus-circle-main-menu-list.plus-circle-menu-list a{ position:relative; color: #fff; font-size: 20px; width: 40px; height: 40px; line-height:40px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; background:#8072fc; color:#fff; border-color:#8072fc; box-shadow: 0px 5px 20px -4px #00000085; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .plus-circle-menu-wrapper .plus-circle-menu-list:hover a ,.plus-circle-menu-wrapper .plus-circle-main-menu-list.plus-circle-menu-list:hover a{ background:#6fc784; color:#fff; border-color:#6fc784; box-shadow: 0px 7px 25px -3px #00000085; } .plus-circle-menu-wrapper .plus-circle-menu.circleMenu-closed .plus-circle-menu-list:not(.plus-circle-main-menu-list), .plus-circle-menu-wrapper .plus-circle-menu:not(.circleMenu-open) .plus-circle-menu-list:not(.plus-circle-main-menu-list){ opacity: 0; } .plus-circle-menu-wrapper .plus-circle-menu-list span.menu-tooltip-title { position: absolute; left: 100%; color: #fff; background: #000; line-height: 1; padding: 5px 10px; border-radius: 4px; font-size: 12px; top: 50%; transform: translateY(-50%); opacity:0; visibility:hidden; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .elementor-element-edit-mode .plus-circle-menu-wrapper.layout-circle .plus-circle-menu-list span.menu-tooltip-title { opacity:1; visibility:visible; } .plus-circle-menu-wrapper .plus-circle-menu-list:hover span.menu-tooltip-title,.plus-circle-menu-wrapper .plus-circle-menu-list.tooltip-default-show span.menu-tooltip-title { opacity:1; visibility:visible; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-left .menu-tooltip-title:before { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid black; position: absolute; right: 100%; content: ''; top: 50%; transform: translateY(-50%); -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-right .menu-tooltip-title:before { border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #000; position: absolute; left: 100%; content: ''; top: 50%; transform: translateY(-50%); -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-top .menu-tooltip-title:before { border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #000; position: absolute; bottom: 100%; content: ''; left: 50%; transform: translateX(-50%); -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-bottom .menu-tooltip-title:before { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #000; position: absolute; top: 100%; content: ''; left: 50%; transform: translateX(-50%); -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-bottom .menu-tooltip-title { margin-top: -10px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-bottom:hover .menu-tooltip-title,.plus-circle-menu-wrapper .plus-circle-menu-list.tooltip-default-show span.menu-tooltip-title { margin-top: 0px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-top .menu-tooltip-title { margin-top: 10px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-top:hover .menu-tooltip-title,.plus-circle-menu-wrapper .plus-circle-menu-list.tooltip-default-show span.menu-tooltip-title { margin-top: 0px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-left .menu-tooltip-title { margin-left: -10px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-left:hover .menu-tooltip-title,.plus-circle-menu-wrapper .plus-circle-menu-list.tooltip-default-show span.menu-tooltip-title { margin-left: 0px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-right .menu-tooltip-title { margin-left: 10px; } .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-right:hover .menu-tooltip-title,.plus-circle-menu-wrapper .plus-circle-menu-list.tooltip-default-show span.menu-tooltip-title { margin-left: 0px; } .plus-circle-menu-wrapper .plus-circle-menu.circleMenu-closed .plus-circle-menu-list:not(.plus-circle-main-menu-list), .plus-circle-menu-wrapper .plus-circle-menu:not(.circleMenu-open) .plus-circle-menu-list:not(.plus-circle-main-menu-list){ visibility:hidden; } .plus-circle-menu-wrapper .plus-circle-menu.circleMenu-open .plus-circle-menu-list:not(.plus-circle-main-menu-list), .plus-circle-menu-wrapper .plus-circle-menu.circleMenu-open .plus-circle-menu-list:not(.plus-circle-main-menu-list){ visibility:visible; } ul.plus-circle-menu.menu-direction-right li.plus-circle-menu-list:not(.plus-circle-main-menu-list) { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; } ul.plus-circle-menu.menu-direction-bottom li.plus-circle-menu-list:not(.plus-circle-main-menu-list) { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: inline-block; } ul.plus-circle-menu.menu-direction-left li.plus-circle-menu-list:not(.plus-circle-main-menu-list) { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-block; } ul.plus-circle-menu.menu-direction-top li.plus-circle-menu-list:not(.plus-circle-main-menu-list) { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: inline-block; } .plus-circle-menu-inner-wrapper { text-align: center; } .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2.menu-direction-right, .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2.menu-direction-left { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } /*style-2 menu straight*/ .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2 li.plus-circle-menu-list:not(.plus-circle-main-menu-list) a { width: auto; height: auto; line-height: inherit; } .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2.circleMenu-open li.plus-circle-menu-list:not(.plus-circle-main-menu-list){ opacity:1; z-index:11; } .plus-circle-menu-wrapper.layout-straight .menu-style-2.circleMenu-closed .plus-circle-menu-list:not(.plus-circle-main-menu-list), .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2:not(.circleMenu-open) .plus-circle-menu-list:not(.plus-circle-main-menu-list){ z-index:-1; } .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2 li.plus-circle-menu-list:not(.plus-circle-main-menu-list) a span.menu-tooltip-title { position: relative; opacity: 1; display: block; visibility: visible; top: 0 !important; left: 0 !important; right: 0 !important; transform: rotate(0deg) !important; margin: 0; white-space: nowrap; } .plus-circle-menu-wrapper.layout-straight ul.plus-circle-menu.menu-style-2 li.plus-circle-menu-list:not(.plus-circle-main-menu-list) a span.menu-tooltip-title:before { display: none; } /*style-2 menu straight*/ .plus-circle-menu-wrapper.scroll-view { opacity: 0; visibility: hidden; -webkit-transition: all .2s ease 0s; -moz-transition: all .2s ease 0s; -o-transition: all .2s ease 0s; transition: all .2s ease 0s; } .plus-circle-menu-wrapper.scroll-view.show { opacity: 1; visibility: visible; } /*toggle icon open style*/ .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-2 a.main_menu_icon .toggle-icon-wrap{ transform: rotate(0deg); -webkit-transition: all .4s ease 0s; -moz-transition: all .4s ease 0s; -o-transition: all .4s ease 0s; transition: all .4s ease 0s; } .plus-circle-menu-wrapper .circleMenu-open .plus-circle-main-menu-list.style-2 a.main_menu_icon .toggle-icon-wrap{ transform: rotate(360deg); } .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3 a.main_menu_icon .close-toggle-icon { position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: scale(0.2) rotate(45deg); transition: all .4s ease-in-out; width: 50%; height: 2px; z-index: 1; background: #000; border-radius: 10px; opacity: 0; visibility: hidden; margin: 0 auto; } .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3 a.main_menu_icon .close-toggle-icon:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0) rotate(-90deg); transition: all .4s ease-in-out; width: 100%; height: 2px; z-index: 1; background: #000; border-radius: 10px; } .plus-circle-menu-wrapper .circleMenu-open .plus-circle-main-menu-list.style-3 a.main_menu_icon .close-toggle-icon { opacity:1; visibility:visible; transform: scale(1) rotate(315deg); } .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3 a.main_menu_icon .toggle-icon-wrap{ transform: scale(1); opacity:1; visibility:visible; transition: all .4s ease-in-out; } .plus-circle-menu-wrapper .circleMenu-open .plus-circle-main-menu-list.style-3 a.main_menu_icon .toggle-icon-wrap{ transform: scale(0.2); opacity:0; visibility:hidden; } /*toggle icon open style*/ /*overlay bg style*/ .plus-circle-menu-inner-wrapper .show-bg-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; } .plus-circle-menu-inner-wrapper .show-bg-overlay.activebg { cursor: url(../../plugins/theplus_elementor_addon/assets/images/overlay-close-icon.png),pointer; filter: alpha(opacity=60); opacity: 0.7; z-index: 1; visibility: visible; } /*overlay bg style*/ /*---- circle menu ----*/