/* Main Menu Container */ .king-addons-mega-menu { display: flex; align-items: center; width: 100%; position: relative; z-index: 999; } /* Horizontal Layout */ .king-addons-mega-menu-horizontal { flex-direction: row; } /* Vertical Layout */ .king-addons-mega-menu-vertical { flex-direction: column; align-items: flex-start; } .king-addons-mega-menu-vertical .king-addons-menu-container { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } /* Logo */ .king-addons-mega-menu-logo { display: flex; align-items: center; } .king-addons-mega-menu-logo img { max-width: 100%; height: auto; } /* Center Logo Layout */ .king-addons-logo-position-center.king-addons-mega-menu-horizontal .king-addons-menu-items { display: flex; align-items: center; /* Default value, overridden by Elementor control */ flex-wrap: wrap; } /* .king-addons-logo-position-center .king-addons-center-logo-placeholder { display: none; } */ .king-addons-center-logo-inserted { display: flex; align-items: center; margin: 0 15px; flex-shrink: 0; } .king-addons-center-logo-inserted .king-addons-mega-menu-logo { margin: 0; } .king-addons-center-logo-active.king-addons-mega-menu-horizontal { justify-content: center; } .king-addons-center-logo-active .king-addons-menu-container { flex: 1; justify-content: center; } /* Lottie Logo Styles */ .king-addons-mega-menu-logo .king-addons-lottie-animations { display: block; max-width: 100%; height: auto; } .king-addons-logo-type-lottie .king-addons-lottie-animations svg, .king-addons-logo-type-lottie .king-addons-lottie-animations canvas { max-width: 100%; height: auto; } /* Center logo Lottie sizing */ .king-addons-center-logo-inserted .king-addons-lottie-animations { width: inherit; height: inherit; } .king-addons-center-logo-inserted .king-addons-lottie-animations svg, .king-addons-center-logo-inserted .king-addons-lottie-animations canvas { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; } /* Menu Container */ .king-addons-menu-container { flex: 1; display: flex; } /* Menu Items */ .king-addons-menu-items { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; } .king-addons-mega-menu-horizontal .king-addons-menu-items { flex-direction: row; } .king-addons-mega-menu-vertical .king-addons-menu-items { flex-direction: column; width: 100%; } .king-addons-menu-items li { position: relative; list-style: none; margin: 0; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li { margin-right: 15px; } .king-addons-mega-menu-vertical .king-addons-menu-items > li { margin-bottom: 10px; width: 100%; display: flex; flex-direction: column; } .king-addons-menu-items li:last-child { margin-right: 0; margin-bottom: 0; } .king-addons-menu-items a { display: flex; text-decoration: none; padding: 10px 15px; transition: all 0.3s ease; } .king-addons-mega-menu-vertical .king-addons-menu-items > li > a { display: flex; width: 100%; } /* Alignment styles for horizontal menu */ .king-addons-mega-menu-horizontal[style*="justify-content: flex-start"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[style*="justify-content: flex-start"] .king-addons-menu-items { justify-content: flex-start; } .king-addons-mega-menu-horizontal[style*="justify-content: center"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[style*="justify-content: center"] .king-addons-menu-items { justify-content: center; } .king-addons-mega-menu-horizontal[style*="justify-content: flex-end"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[style*="justify-content: flex-end"] .king-addons-menu-items { justify-content: flex-end; } .king-addons-mega-menu-horizontal[style*="justify-content: space-between"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[style*="justify-content: space-between"] .king-addons-menu-items { justify-content: space-between; } /* Horizontal alignment using data attributes */ .king-addons-mega-menu-horizontal[data-horizontal-align="flex-start"], .king-addons-mega-menu-horizontal[data-horizontal-align="flex-start"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[data-horizontal-align="flex-start"] .king-addons-menu-items { justify-content: flex-start; } .king-addons-mega-menu-horizontal[data-horizontal-align="center"], .king-addons-mega-menu-horizontal[data-horizontal-align="center"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[data-horizontal-align="center"] .king-addons-menu-items { justify-content: center; } .king-addons-mega-menu-horizontal[data-horizontal-align="flex-end"], .king-addons-mega-menu-horizontal[data-horizontal-align="flex-end"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[data-horizontal-align="flex-end"] .king-addons-menu-items { justify-content: flex-end; } .king-addons-mega-menu-horizontal[data-horizontal-align="space-between"], .king-addons-mega-menu-horizontal[data-horizontal-align="space-between"] .king-addons-menu-container, .king-addons-mega-menu-horizontal[data-horizontal-align="space-between"] .king-addons-menu-items { justify-content: space-between; } /* Vertical alignment styles using data-attribute */ .king-addons-mega-menu-vertical[data-vertical-align="flex-start"] .king-addons-menu-container, .king-addons-mega-menu-vertical[data-vertical-align="flex-start"] .king-addons-menu-items { align-items: flex-start; } .king-addons-mega-menu-vertical[data-vertical-align="center"] .king-addons-menu-container, .king-addons-mega-menu-vertical[data-vertical-align="center"] .king-addons-menu-items { align-items: center; } .king-addons-mega-menu-vertical[data-vertical-align="flex-end"] .king-addons-menu-container, .king-addons-mega-menu-vertical[data-vertical-align="flex-end"] .king-addons-menu-items { align-items: flex-end; } .king-addons-mega-menu-vertical[data-vertical-align="flex-start"] .king-addons-menu-items > li > a { justify-content: flex-start; } .king-addons-mega-menu-vertical[data-vertical-align="center"] .king-addons-menu-items > li > a { justify-content: center; } .king-addons-mega-menu-vertical[data-vertical-align="flex-end"] .king-addons-menu-items > li > a { justify-content: flex-end; } /* Submenu Styles */ .king-addons-menu-items ul.sub-menu, .king-addons-menu-items ul.king-addons-submenu { position: absolute; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); min-width: 200px; margin: 0; padding: 10px 0; list-style: none; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal .king-addons-menu-items > li > ul.king-addons-submenu { top: 100%; left: 0; transform: translateY(10px); } .king-addons-mega-menu-vertical .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-vertical .king-addons-menu-items > li > ul.king-addons-submenu { top: 0; left: 100%; transform: translateX(10px); } .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-menu-items li:hover > ul.king-addons-submenu { opacity: 1; visibility: visible; } .king-addons-menu-items ul.sub-menu li, .king-addons-menu-items ul.king-addons-submenu li { position: relative; width: 100%; margin: 0; } .king-addons-menu-items ul.sub-menu li a, .king-addons-menu-items ul.king-addons-submenu li a { padding: 8px 15px; display: flex; align-items: center; text-decoration: none; color: inherit; width: 100%; } .king-addons-menu-items ul.sub-menu ul.sub-menu, .king-addons-menu-items ul.king-addons-submenu ul.king-addons-submenu, .king-addons-menu-items ul.sub-menu ul.king-addons-submenu, .king-addons-menu-items ul.king-addons-submenu ul.sub-menu { top: 0; left: 100%; transform: translateX(10px); } /* Dropdown Width Styles */ .king-addons-dropdown-width-custom .king-addons-menu-items > li > ul.sub-menu { width: 300px; /* Default value, will be overridden by custom settings */ } .king-addons-dropdown-width-full .king-addons-menu-items > li > ul.sub-menu { width: 100vw; left: 50%; right: auto; transform: translateX(-50%) translateY(10px); margin-left: 0; } .king-addons-dropdown-width-full .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateX(-50%) translateY(0); } /* Dropdown Position Styles (Pro) */ .king-addons-mega-menu-horizontal .king-addons-dropdown-position-left .king-addons-menu-items > li > ul.sub-menu { left: 0; right: auto; transform: translateY(10px); } .king-addons-mega-menu-horizontal .king-addons-dropdown-position-left .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateY(0); } .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li > ul.sub-menu, .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) translateY(10px); } .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li:hover > ul.sub-menu, .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) translateY(0); } .king-addons-mega-menu-horizontal .king-addons-dropdown-position-right .king-addons-menu-items > li > ul.sub-menu { left: auto; right: 0; transform: translateY(10px); } .king-addons-mega-menu-horizontal .king-addons-dropdown-position-right .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateY(0); } /* --- FIX: Center align dropdown under top menu item --- */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center .king-addons-menu-items > li > ul.sub-menu { left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(10px) !important; min-width: 220px; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateX(-50%) translateY(0) !important; } /* --- END FIX --- */ /* --- FIX: Right align dropdown under top menu item --- */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-right .king-addons-menu-items > li > ul.sub-menu { left: auto !important; right: 0 !important; transform: translateY(10px) !important; min-width: 220px; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-right .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateY(0) !important; } /* --- END FIX --- */ /* Dropdown Animation Styles */ .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items .king-addons-submenu { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none !important; } .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items .king-addons-submenu { transition: opacity 0.3s ease, visibility 0.3s ease; transform: none !important; } .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items .king-addons-submenu { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items li:hover > .king-addons-submenu, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items li:hover > .king-addons-submenu { transform: none !important; } /* Advanced Animations (Pro) */ .king-addons-mega-menu .king-addons-animation-fade-up .king-addons-menu-items ul.sub-menu { transform: translateY(20px); } .king-addons-mega-menu .king-addons-animation-fade-up .king-addons-menu-items li:hover > ul.sub-menu { transform: translateY(0); } .king-addons-mega-menu .king-addons-animation-fade-down .king-addons-menu-items ul.sub-menu { transform: translateY(-20px); } .king-addons-mega-menu .king-addons-animation-fade-down .king-addons-menu-items li:hover > ul.sub-menu { transform: translateY(0); } .king-addons-mega-menu .king-addons-animation-fade-left .king-addons-menu-items ul.sub-menu { transform: translateX(20px); } .king-addons-mega-menu .king-addons-animation-fade-left .king-addons-menu-items li:hover > ul.sub-menu { transform: translateX(0); } .king-addons-mega-menu .king-addons-animation-fade-right .king-addons-menu-items ul.sub-menu { transform: translateX(-20px); } .king-addons-mega-menu .king-addons-animation-fade-right .king-addons-menu-items li:hover > ul.sub-menu { transform: translateX(0); } .king-addons-mega-menu .king-addons-animation-zoom-in .king-addons-menu-items ul.sub-menu { transform: scale(0.9); } .king-addons-mega-menu .king-addons-animation-zoom-in .king-addons-menu-items li:hover > ul.sub-menu { transform: scale(1); } .king-addons-mega-menu .king-addons-animation-zoom-out .king-addons-menu-items ul.sub-menu { transform: scale(1.1); } .king-addons-mega-menu .king-addons-animation-zoom-out .king-addons-menu-items li:hover > ul.sub-menu { transform: scale(1); } /* Combine animation base transitions with advanced animations */ .king-addons-mega-menu[class*="king-addons-animation-"] .king-addons-menu-items ul.sub-menu { transition: opacity var(--animation-duration, 0.3s) ease, visibility var(--animation-duration, 0.3s) ease, transform var(--animation-duration, 0.3s) ease; } /* Vertical menu adjustments for dropdown animations */ .king-addons-mega-menu-vertical[data-dropdown-animation="slide"] .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-vertical.king-addons-animation-fade-left .king-addons-menu-items > li > ul.sub-menu { transform: translateX(10px); } .king-addons-mega-menu-vertical[data-dropdown-animation="slide"] .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-vertical.king-addons-animation-fade-left .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateX(0); } .king-addons-mega-menu-vertical.king-addons-animation-fade-right .king-addons-menu-items > li > ul.sub-menu { transform: translateX(-10px); } .king-addons-mega-menu-vertical.king-addons-animation-fade-right .king-addons-menu-items > li:hover > ul.sub-menu { transform: translateX(0); } /* Current Menu Item Styles */ .king-addons-menu-items > li.current-menu-item > a, .king-addons-menu-items > li.current-menu-ancestor > a { position: relative; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 2px; background-color: currentColor; } /* Mobile Menu */ .king-addons-mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; padding: 10px; order: 2; /* By default on the right */ margin-left: auto; align-items: center; justify-content: center; transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease; } .king-addons-mobile-menu-toggle:hover { transform: scale(1.05); } .king-addons-mobile-menu-toggle.active { transform: rotate(90deg); } .king-addons-mobile-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 9999; padding: 15px; } .king-addons-mobile-menu .king-addons-menu-items, .king-addons-mobile-menu .king-addons-menu-items ul, .king-addons-mobile-menu .king-addons-submenu { flex-direction: column !important; width: 100%; position: relative; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; margin: 0; } .king-addons-mobile-menu .king-addons-menu-items li { margin: 0; width: 100%; display: flex; flex-direction: column; } .king-addons-mobile-menu .king-addons-menu-items a { padding: 10px 0; width: 100%; color: inherit; /* Ensure color inheritance */ text-decoration: none; } .king-addons-mobile-menu .king-addons-menu-items ul.sub-menu, .king-addons-mobile-menu .king-addons-menu-items ul.king-addons-submenu { display: none; padding-left: 15px; position: static; opacity: 1; visibility: visible; box-shadow: none; transform: none; } /* Custom submenu styles */ .king-addons-submenu { position: absolute; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); min-width: 200px; margin: 0; padding: 10px 0; list-style: none; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li > .king-addons-submenu { top: 100%; left: 0; transform: translateY(10px); } .king-addons-mega-menu-vertical .king-addons-menu-items > li > .king-addons-submenu { top: 0; left: 100%; transform: translateX(10px); } .king-addons-menu-items li:hover > .king-addons-submenu { opacity: 1; visibility: visible; transform: translate(0); } .king-addons-submenu li { position: relative; width: 100%; margin: 0; } .king-addons-submenu li a { padding: 8px 15px; display: flex; align-items: center; text-decoration: none; } .king-addons-submenu .king-addons-submenu { top: 0; left: 100%; transform: translateX(10px); } /* Fix for submenu items in Elementor editor */ .elementor-editor-active .king-addons-parent-submenu-item { border-left: 3px solid #556068 !important; } .elementor-editor-active .king-addons-submenu-item { border-left: 3px solid #6d7882 !important; } .elementor-editor-active .king-addons-submenu-container { background-color: rgba(0, 0, 0, 0.03); padding: 5px; border-radius: 3px; } /* Positioning the mobile button */ .king-addons-mobile-menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; padding: 10px; order: 2; /* By default on the right */ margin-left: auto; align-items: center; justify-content: center; transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease; } /* Button position on the left */ .king-addons-mobile-toggle-left .king-addons-mobile-menu-toggle { order: 0; margin-left: 0; margin-right: auto; } /* Styles for the icon color and toggle button background */ .king-addons-mobile-menu-toggle i, .king-addons-mobile-menu-toggle svg { transition: color 0.3s ease, background-color 0.3s ease; } /* Styles for the mobile menu close button */ .king-addons-mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 24px; cursor: pointer; padding: 10px; margin-bottom: 15px; transition: color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease; } .king-addons-mobile-menu-close i, .king-addons-mobile-menu-close svg { transition: color 0.3s ease; } /* Mobile adaptive styles */ @media (max-width: 1024px) { /* Basic styles for the mobile version */ .king-addons-menu-container { display: none; order: 3; /* The menu will always be below the header and button */ width: 100%; flex-basis: 100%; } .king-addons-mobile-menu-toggle { display: flex; align-items: center; justify-content: center; } .king-addons-mega-menu { justify-content: space-between !important; flex-wrap: wrap; display: flex; align-items: center; } /* Adapt the logo position depending on the toggle position */ .king-addons-mega-menu-logo { order: 1; /* In the mobile version, it will always be between the toggle and the content */ display: flex; /* Added for alignment inside the container */ width: auto; /* For correct alignment */ flex-grow: 1; /* Takes up all remaining space */ } /* If the toggle is on the left, the logo should be on the right */ .king-addons-mobile-toggle-left .king-addons-logo-mobile-position-right { margin-left: auto; margin-right: 0; order: 1; } /* If the toggle is on the right, the logo should be on the left */ .king-addons-mega-menu:not(.king-addons-mobile-toggle-left) .king-addons-logo-mobile-position-left { margin-left: 0; margin-right: auto; order: 0; } /* Always vertical menu view in mobile mode */ .king-addons-mobile-menu .king-addons-menu-items, .king-addons-mobile-menu .king-addons-menu-items ul, .king-addons-mobile-menu .king-addons-submenu { flex-direction: column !important; width: 100%; position: relative; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; margin: 0; } /* Reset horizontal styles for the mobile menu */ .king-addons-mega-menu-horizontal .king-addons-menu-items { flex-direction: column !important; } /* Override rules for the mobile menu */ .king-addons-mobile-menu .king-addons-menu-items li { margin: 0; width: 100%; display: flex; flex-direction: column; /* Always vertical */ } .king-addons-mobile-menu .king-addons-menu-items a { padding: 10px 0; width: 100%; /* Occupy the entire available width */ color: inherit; /* Ensure color inheritance */ text-decoration: none; } .king-addons-menu-items > li > ul.sub-menu, .king-addons-menu-items > li > .king-addons-template-content, .king-addons-menu-items > li > .king-addons-submenu { transform: none !important; } .king-addons-logo-position-mobile-left .king-addons-mega-menu-logo { order: -2; /* Before mobile toggle */ } .king-addons-logo-position-mobile-right .king-addons-mega-menu-logo { order: 2; /* After mobile toggle */ margin-left: auto; } /* Center position on mobile */ .king-addons-mega-menu .king-addons-center-logo-placeholder { display: flex; /* default hidden on mobile */ order: 1; /* place between left area and the toggle */ flex: 1 1 auto; /* fill all available space up to the toggle */ align-items: center; margin: 0; /* remove extra spacing that pushed it to a new line */ min-width: 0; /* allow contents to shrink within the row */ } /* Show placeholder only when mobile center is selected and align it */ .king-addons-logo-position-mobile-center .king-addons-center-logo-placeholder { display: flex; } .king-addons-logo-position-mobile-left .king-addons-center-logo-placeholder { justify-content: flex-start; } .king-addons-logo-position-mobile-center .king-addons-center-logo-placeholder { justify-content: center; } .king-addons-logo-position-mobile-right .king-addons-center-logo-placeholder { justify-content: flex-end; } .king-addons-center-logo-inserted { display: none; /* Hide JavaScript-inserted logo on mobile when center */ } .king-addons-logo-position-mobile-left { justify-content: flex-start; } .king-addons-logo-position-mobile-center { justify-content: center; } .king-addons-logo-position-mobile-right { justify-content: flex-end; } } @media (min-width: 1025px) { .king-addons-logo-position-mobile-center .king-addons-center-logo-placeholder, .king-addons-logo-position-tablet-center .king-addons-center-logo-placeholder, .king-addons-logo-position-center .king-addons-center-logo-placeholder, .king-addons-logo-position-tablet-left .king-addons-center-logo-placeholder, .king-addons-logo-position-tablet-right .king-addons-center-logo-placeholder, .king-addons-logo-position-mobile-left .king-addons-center-logo-placeholder, .king-addons-logo-position-mobile-right .king-addons-center-logo-placeholder { display: none; } } /* Responsive Logo Positioning - Tablet */ @media (min-width: 768px) and (max-width: 1024px) { .king-addons-logo-position-tablet-left { justify-content: flex-start; } .king-addons-logo-position-tablet-center { justify-content: center; } .king-addons-logo-position-tablet-right { justify-content: flex-end; } /* Left position on tablet */ /* .king-addons-logo-position-tablet-left .king-addons-center-logo-placeholder { display: none; } */ .king-addons-logo-position-tablet-left .king-addons-mega-menu-logo { order: -1; margin-right: auto; } /* Right position on tablet */ /* .king-addons-logo-position-tablet-right .king-addons-center-logo-placeholder { display: none; } */ .king-addons-logo-position-tablet-right .king-addons-mega-menu-logo { order: 1; margin-left: auto; } /* Center position on tablet - center within bar (not between items) */ /* .king-addons-logo-position-tablet-center .king-addons-center-logo-placeholder { display: block; position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } */ .king-addons-logo-position-tablet-center .king-addons-center-logo-inserted { display: none !important; } /* Default hide placeholder on tablet */ /* .king-addons-center-logo-placeholder { display: none; } */ /* On tablet, when using center layout, place the placeholder in the bar and align by control */ .king-addons-logo-position-tablet-center .king-addons-center-logo-placeholder { display: flex; order: 1; flex: 1 1 auto; align-items: center; min-width: 0; } .king-addons-logo-position-tablet-left .king-addons-center-logo-placeholder { justify-content: flex-start; } .king-addons-logo-position-tablet-center .king-addons-center-logo-placeholder { justify-content: center; } .king-addons-logo-position-tablet-right .king-addons-center-logo-placeholder { justify-content: flex-end; } } /* Additional Styles for Customization */ .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-item > a, .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-ancestor > a { position: relative; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-mega-menu-horizontal .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 2px; background-color: currentColor; } /* Icon Styles */ .king-addons-menu-items > li .menu-item-icon { margin-right: 8px; } /* Ensure dropdown doesn't get cut off */ .king-addons-mega-menu { overflow: visible !important; } .king-addons-menu-container { overflow: visible !important; } /* Elementor Template in Dropdown */ .king-addons-menu-items li .king-addons-template-content { position: absolute; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .king-addons-mega-menu-horizontal .king-addons-menu-items > li > .king-addons-template-content { top: 100%; left: 0; transform: translateY(10px); } .king-addons-mega-menu-vertical .king-addons-menu-items > li > .king-addons-template-content { top: 0; left: 100%; transform: translateX(10px); } /* Dropdown Position for Elementor Template */ .king-addons-mega-menu-horizontal .king-addons-dropdown-position-left .king-addons-menu-items > li > .king-addons-template-content { left: 0; right: auto; transform: translateY(10px); } .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li > .king-addons-template-content { left: 50%; right: auto; transform: translateX(-50%) translateY(10px); } .king-addons-mega-menu-horizontal .king-addons-dropdown-position-right .king-addons-menu-items > li > .king-addons-template-content { left: auto; right: 0; transform: translateY(10px); } /* Show Elementor Template on hover */ .king-addons-menu-items li:hover > .king-addons-template-content { opacity: 1; visibility: visible; transform: translate(0); } .elementor-widget-king-addons-mega-menu.king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-menu-items > li:hover > .king-addons-template-content { transform: translateX(-50%) translateY(0); } /* Dropdown Width for Elementor Template */ .king-addons-dropdown-width-custom .king-addons-menu-items > li > .king-addons-template-content { width: 300px; /* Default value, will be overridden by custom settings */ } .king-addons-dropdown-width-full .king-addons-menu-items > li > .king-addons-template-content { width: 100vw; left: 50%; right: auto; transform: translateX(-50%) translateY(10px); margin-left: 0; } .king-addons-dropdown-width-full .king-addons-menu-items > li:hover > .king-addons-template-content { transform: translateX(-50%) translateY(0); } /* Animation for Elementor Template */ .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items .king-addons-template-content { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; } .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items .king-addons-template-content { transition: opacity 0.3s ease, visibility 0.3s ease; transform: none; } .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items .king-addons-template-content { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items li:hover > .king-addons-template-content { transform: none; } /* Advanced Animations (Pro) for Elementor Template */ .king-addons-mega-menu .king-addons-animation-fade-up .king-addons-menu-items .king-addons-template-content { transform: translateY(20px); } .king-addons-mega-menu .king-addons-animation-fade-up .king-addons-menu-items li:hover > .king-addons-template-content { transform: translateY(0); } .king-addons-mega-menu .king-addons-animation-fade-down .king-addons-menu-items .king-addons-template-content { transform: translateY(-20px); } .king-addons-mega-menu .king-addons-animation-fade-down .king-addons-menu-items li:hover > .king-addons-template-content { transform: translateY(0); } .king-addons-mega-menu .king-addons-animation-fade-left .king-addons-menu-items .king-addons-template-content { transform: translateX(20px); } .king-addons-mega-menu .king-addons-animation-fade-left .king-addons-menu-items li:hover > .king-addons-template-content { transform: translateX(0); } .king-addons-mega-menu .king-addons-animation-fade-right .king-addons-menu-items .king-addons-template-content { transform: translateX(-20px); } .king-addons-mega-menu .king-addons-animation-fade-right .king-addons-menu-items li:hover > .king-addons-template-content { transform: translateX(0); } .king-addons-mega-menu .king-addons-animation-zoom-in .king-addons-menu-items .king-addons-template-content { transform: scale(0.9); } .king-addons-mega-menu .king-addons-animation-zoom-in .king-addons-menu-items li:hover > .king-addons-template-content { transform: scale(1); } .king-addons-mega-menu .king-addons-animation-zoom-out .king-addons-menu-items .king-addons-template-content { transform: scale(1.1); } .king-addons-mega-menu .king-addons-animation-zoom-out .king-addons-menu-items li:hover > .king-addons-template-content { transform: scale(1); } /* Fix for center positioning with advanced animations */ .king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-animation-fade-up .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-animation-fade-down .king-addons-menu-items > li > .king-addons-template-content { transform: translateX(-50%) translateY(20px); } .king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-animation-fade-up .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal .king-addons-dropdown-position-center .king-addons-animation-fade-down .king-addons-menu-items > li:hover > .king-addons-template-content { transform: translateX(-50%) translateY(0); } /* Mobile menu adjustments for Elementor templates */ .king-addons-mobile-menu .king-addons-menu-items .king-addons-template-content { position: relative; width: 100% !important; opacity: 1; visibility: visible; transform: none !important; box-shadow: none; padding: 10px 0; display: none; /* Initially hidden in mobile view */ } .king-addons-mega-menu-vertical .king-addons-menu-container { align-items: flex-start; } .king-addons-mega-menu-vertical[data-vertical-align="center"] .king-addons-menu-container, .king-addons-mega-menu-vertical[data-vertical-align="center"] .king-addons-menu-items { align-items: center; } .king-addons-mega-menu-vertical[data-vertical-align="flex-end"] .king-addons-menu-container, .king-addons-mega-menu-vertical[data-vertical-align="flex-end"] .king-addons-menu-items { align-items: flex-end; } /* Basic styles for WordPress menu items */ .king-addons-mega-menu .king-addons-menu-items { display: flex; margin: 0; padding: 0; list-style: none; width: 100%; } .king-addons-mega-menu-horizontal .king-addons-menu-items { flex-direction: row; } .king-addons-mega-menu-vertical .king-addons-menu-items { flex-direction: column; width: 100%; } /* Basic styles for WordPress menu items */ .king-addons-menu-items > li { position: relative; list-style: none; margin: 0; } .king-addons-mega-menu-horizontal .king-addons-menu-items > li { margin-right: 15px; } .king-addons-mega-menu-vertical .king-addons-menu-items > li { margin-bottom: 10px; width: 100%; display: flex; flex-direction: column; } .king-addons-menu-items > li:last-child { margin-right: 0; margin-bottom: 0; } .king-addons-menu-items > li > a { display: flex; text-decoration: none; padding: 10px 15px; transition: all 0.3s ease; } .king-addons-mega-menu-vertical .king-addons-menu-items > li > a { display: flex; width: 100%; } /* Styles for logo alignment on mobile devices */ /* .king-addons-logo-mobile-alignment-left { justify-content: flex-start; } .king-addons-logo-mobile-alignment-center { justify-content: center; } .king-addons-logo-mobile-alignment-right { justify-content: flex-end; } */ /* Styles for hover effects */ .king-addons-menu-items > li > a { position: relative; overflow: hidden; } /* Common styles for hover indicators and active item */ .king-addons-menu-items > li > a:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: currentColor; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: -1; } /* Underline hover effect */ .king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:after { bottom: 0; height: 2px; left: 0; right: 0; } /* Overline hover effect */ .king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:after { top: 0; bottom: auto; height: 2px; left: 0; right: 0; } /* Double-line hover effect */ .king-addons-menu-items-hover-double-line .king-addons-menu-items > li > a:after { content: ''; height: auto; top: 0; bottom: 0; left: 0; right: 0; border-top: 2px solid; border-bottom: 2px solid; background-color: transparent; transform: scaleY(0); } /* Framed hover effect */ .king-addons-menu-items-hover-framed .king-addons-menu-items > li > a:after { content: ''; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid; background-color: transparent; transform: scale(0); } /* Background hover effect */ .king-addons-menu-items-hover-background .king-addons-menu-items > li > a:after { content: ''; top: 0; bottom: 0; left: 0; right: 0; transform: scale(0); opacity: 0; } /* Hover animations */ /* Fade Animation */ .king-addons-hover-animation-fade .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: none; } /* Slide Animation */ .king-addons-hover-animation-slide.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:after, .king-addons-hover-animation-slide.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:after { width: 100%; transform: translateX(-100%); } .king-addons-hover-animation-slide.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:hover:after, .king-addons-hover-animation-slide.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: translateX(0); } /* Grow Animation */ .king-addons-hover-animation-grow.king-addons-menu-items-hover-background .king-addons-menu-items > li > a:after, .king-addons-hover-animation-grow.king-addons-menu-items-hover-framed .king-addons-menu-items > li > a:after { transform: scale(0); } .king-addons-hover-animation-grow.king-addons-menu-items-hover-background .king-addons-menu-items > li > a:hover:after, .king-addons-hover-animation-grow.king-addons-menu-items-hover-framed .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: scale(1); } .king-addons-hover-animation-grow.king-addons-menu-items-hover-double-line .king-addons-menu-items > li > a:after { transform: scaleY(0); } .king-addons-hover-animation-grow.king-addons-menu-items-hover-double-line .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: scaleY(1); } /* Drop In Animation */ .king-addons-hover-animation-drop-in.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:after, .king-addons-hover-animation-drop-in.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:after { transform: translateY(10px); } .king-addons-hover-animation-drop-in.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:hover:after, .king-addons-hover-animation-drop-in.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: translateY(0); } /* Drop Out Animation */ .king-addons-hover-animation-drop-out.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:after, .king-addons-hover-animation-drop-out.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:after { transform: translateY(-10px); } .king-addons-hover-animation-drop-out.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:hover:after, .king-addons-hover-animation-drop-out.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:hover:after { opacity: 1; transform: translateY(0); } /* Styles for the active menu item (current-menu-item) */ .king-addons-menu-items > li.current-menu-item > a, .king-addons-menu-items > li.current-menu-ancestor > a { position: relative; } /* Common styles */ .king-addons-current-item-underline .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-underline .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: currentColor; opacity: 1; } .king-addons-current-item-overline .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-overline .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: currentColor; opacity: 1; } .king-addons-current-item-double-line .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-double-line .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 1; background-color: transparent; } .king-addons-current-item-framed .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-framed .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid currentColor; opacity: 1; background-color: transparent; } .king-addons-current-item-background .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-background .king-addons-menu-items > li.current-menu-ancestor > a:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.1; background-color: currentColor; } .king-addons-current-item-text .king-addons-menu-items > li.current-menu-item > a:after, .king-addons-current-item-text .king-addons-menu-items > li.current-menu-ancestor > a:after { content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 5px; background-color: transparent; opacity: 1; height: auto; top: 50%; transform: translateY(-50%); } .king-addons-hover-effects-disabled.king-addons-menu-items-hover-underline .king-addons-menu-items > li > a:after, .king-addons-hover-effects-disabled.king-addons-menu-items-hover-overline .king-addons-menu-items > li > a:after, .king-addons-hover-effects-disabled.king-addons-menu-items-hover-double-line .king-addons-menu-items > li > a:after, .king-addons-hover-effects-disabled.king-addons-menu-items-hover-framed .king-addons-menu-items > li > a:after, .king-addons-hover-effects-disabled.king-addons-menu-items-hover-background .king-addons-menu-items > li > a:after { display: none; } /* --- UNIFIED DROPDOWN ANIMATION SYSTEM --- */ /* 1. Basic styles: only opacity/visibility, transform only via animation */ .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-menu-items li:hover > ul.king-addons-submenu { opacity: 1; visibility: visible; } /* 2. All dropdown menus by default: transform for animation is set only via data-dropdown-animation or class */ .king-addons-menu-items ul.sub-menu, .king-addons-menu-items ul.king-addons-submenu { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; } /* 3. Fade (by data-attribute) */ .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="fade"] .king-addons-menu-items ul.king-addons-submenu { transform: none; } /* 4. Slide (by data-attribute) */ .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items ul.king-addons-submenu { transform: translateY(20px); } .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="slide"] .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: translateY(0); } /* 5. None (by data-attribute) */ .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu[data-dropdown-animation="none"] .king-addons-menu-items ul.king-addons-submenu { transition: none; transform: none; } /* 6. Advanced: fade-up, fade-down, fade-left, fade-right, zoom-in, zoom-out (by class) */ .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items ul.king-addons-submenu { transform: translateY(20px); } .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: translateY(0); } .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items ul.king-addons-submenu { transform: translateY(-20px); } .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: translateY(0); } .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items ul.king-addons-submenu { transform: translateX(20px); } .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: translateX(0); } .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items ul.king-addons-submenu { transform: translateX(-20px); } .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: translateX(0); } .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items ul.king-addons-submenu { transform: scale(0.9); } .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: scale(1); } .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items ul.king-addons-submenu { transform: scale(1.1); } .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items li:hover > ul.king-addons-submenu { transform: scale(1); } /* --- END UNIFIED SYSTEM --- */ /* --- UNIFIED ANIMATION SYSTEM FOR ALL DROPDOWNS --- */ .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items .king-addons-submenu { transform: translateY(20px) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-up .king-addons-menu-items li:hover > .king-addons-submenu { transform: translateY(0) !important; } .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items .king-addons-submenu { transform: translateY(-20px) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-down .king-addons-menu-items li:hover > .king-addons-submenu { transform: translateY(0) !important; } .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items .king-addons-submenu { transform: translateX(20px) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-left .king-addons-menu-items li:hover > .king-addons-submenu { transform: translateX(0) !important; } .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items .king-addons-submenu { transform: translateX(-20px) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-fade-right .king-addons-menu-items li:hover > .king-addons-submenu { transform: translateX(0) !important; } .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items .king-addons-submenu { transform: scale(0.9) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-zoom-in .king-addons-menu-items li:hover > .king-addons-submenu { transform: scale(1) !important; } .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items .king-addons-submenu { transform: scale(1.1) !important; transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; } .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items li:hover > ul.sub-menu, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items li:hover > .king-addons-template-content, .king-addons-mega-menu.king-addons-animation-zoom-out .king-addons-menu-items li:hover > .king-addons-submenu { transform: scale(1) !important; } /* --- END UNIFIED SYSTEM --- */ /* --- COMBINED POSITION + ANIMATION SYSTEM --- */ /* Center + fade-up */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) translateY(20px) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-up .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) translateY(0) !important; } /* Center + fade-down */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) translateY(-20px) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-down .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) translateY(0) !important; } /* Center + fade-left */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) translateX(20px) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-left .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) translateX(0) !important; } /* Center + fade-right */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) translateX(-20px) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-fade-right .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) translateX(0) !important; } /* Center + zoom-in */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) scale(0.9) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-in .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) scale(1) !important; } /* Center + zoom-out */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) scale(1.1) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li:hover > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li:hover > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center.king-addons-animation-zoom-out .king-addons-menu-items > li:hover > .king-addons-submenu { transform: translateX(-50%) scale(1) !important; } /* Repeat similar for left and right positions if needed */ /* --- END COMBINED SYSTEM --- */ /* --- COMBINED POSITION + FADE ANIMATION SYSTEM --- */ .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center[data-dropdown-animation="fade"] .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-center[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-submenu { left: 50%; right: auto; transform: translateX(-50%) !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-right[data-dropdown-animation="fade"] .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-right[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-right[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-submenu { left: auto; right: 0; transform: none !important; } .king-addons-mega-menu-horizontal.king-addons-dropdown-position-left[data-dropdown-animation="fade"] .king-addons-menu-items > li > ul.sub-menu, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-left[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-template-content, .king-addons-mega-menu-horizontal.king-addons-dropdown-position-left[data-dropdown-animation="fade"] .king-addons-menu-items > li > .king-addons-submenu { left: 0; right: auto; transform: none !important; } /* --- END COMBINED FADE SYSTEM --- */ /* Dropdown icon styles */ .menu-item-has-children > a .king-addons-dropdown-icon { display: inline-flex; align-items: center; transition: transform 0.3s; font-size: 13px; } .menu-item-has-children.king-addons-mobile-menu__item--open > a .king-addons-dropdown-icon { transform: rotate(180deg); } /* Responsive Menu Bar Background Support */ @media (max-width: 1024px) { .king-addons-mega-menu { padding: 10px 15px; /* Default padding for tablet/mobile menu bar */ min-height: 60px; /* Minimum height for tablet/mobile menu bar */ display: flex; align-items: center; justify-content: space-between; position: relative; width: 100%; box-sizing: border-box; } /* Center logo in the bar on tablet/mobile (not between items) */ /* .king-addons-logo-position-tablet-center .king-addons-center-logo-placeholder, .king-addons-logo-position-mobile-center .king-addons-center-logo-placeholder { display: block; position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } */ /* Hide JS-inserted center logo on tablet/mobile to avoid duplicates */ .king-addons-logo-position-tablet-center .king-addons-center-logo-inserted, .king-addons-logo-position-mobile-center .king-addons-center-logo-inserted { display: none !important; } } @media (max-width: 767px) { .king-addons-mega-menu { padding: 8px 15px; /* Smaller padding for mobile */ min-height: 50px; /* Smaller height for mobile */ } } .menu-item-has-children:hover > a .king-addons-dropdown-icon { transform: rotate(180deg); } .king-addons-mega-menu-logo .king-addons-lottie-animations svg { overflow: visible; }