.site-header.header-main-layout-1 { position: sticky !important; top: 0 !important; z-index: 999 !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s ease-in-out !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; } /* Add subtle animation when scrolling */ .site-header.header-main-layout-1:hover { box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12) !important; } /* Make header slightly smaller when sticky (optional) */ .site-header.header-main-layout-1.shrink { padding: 8px 0 !important; } /* Improve logo/navigation spacing */ .site-header.header-main-layout-1 .ast-container { padding: 0 20px !important; } /* Navigation links styling */ .site-header.header-main-layout-1 .main-navigation ul li a { transition: all 0.3s ease !important; position: relative !important; } .site-header.header-main-layout-1 .main-navigation ul li a:hover { transform: translateY(-1px) !important; } /* Add subtle underline animation for nav links */ .site-header.header-main-layout-1 .main-navigation ul li a::after { content: '' !important; position: absolute !important; width: 0 !important; height: 2px !important; bottom: -5px !important; left: 50% !important; background: #007cba !important; /* Change to your brand color */ transition: all 0.3s ease !important; transform: translateX(-50%) !important; } .site-header.header-main-layout-1 .main-navigation ul li a:hover::after { width: 100% !important; } /* Mobile responsiveness */ @media (max-width: 768px) { .site-header.header-main-layout-1 { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(8px) !important; } .site-header.header-main-layout-1 .ast-container { padding: 0 15px !important; } } /* Smooth scroll behavior for entire page */ html { scroll-behavior: smooth !important; } /* Optional: Add a subtle top border accent */ .site-header.header-main-layout-1::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #007cba, #00a0d2) !important; /* Your brand colors */ } /* Change submenu link color to black for visibility */ .site-header.header-main-layout-1 .main-navigation .sub-menu li a { color: #333333 !important; } .site-header.header-main-layout-1 .main-navigation .sub-menu li a:hover { color: #ffffff !important; } /* Elegant border and shadow to distinguish submenu from page body */ .site-header.header-main-layout-1 .main-navigation .sub-menu { border: 1.5px solid #000000 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important, 0 0 0 1px rgba(0, 124, 186, 0.08) !important, inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(8px) saturate(180%) !important; -webkit-backdrop-filter: blur(8px) saturate(180%) !important; } /* Add subtle animation when submenu appears */ .site-header.header-main-layout-1 .main-navigation .sub-menu { animation: slideDown 0.3s ease-out !important; transform-origin: top center !important; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Style for active/current submenu item */ .site-header.header-main-layout-1 .main-navigation .sub-menu li.current-menu-item a, .site-header.header-main-layout-1 .main-navigation .sub-menu li.current_page_item a, .site-header.header-main-layout-1 .main-navigation .sub-menu li.current-menu-ancestor a { color: #4f2683 !important; background: rgba(79, 38, 131, 0.1) !important; font-weight: 600 !important; } /* Active submenu item hover state */ .site-header.header-main-layout-1 .main-navigation .sub-menu li.current-menu-item a:hover, .site-header.header-main-layout-1 .main-navigation .sub-menu li.current_page_item a:hover, .site-header.header-main-layout-1 .main-navigation .sub-menu li.current-menu-ancestor a:hover { color: #ffffff !important; background: #4f2683 !important; } /* Alternative: Add a left border indicator for active items */ .site-header.header-main-layout-1 .main-navigation .sub-menu li.current-menu-item, .site-header.header-main-layout-1 .main-navigation .sub-menu li.current_page_item { border-left: 4px solid #4f2683 !important; } /* Mobile-specific fixes for submenu visibility */ @media (max-width: 921px) { /* Make the main mobile header scrollable */ .ast-mobile-header-wrap .ast-mobile-header-content, .ast-mobile-popup-drawer.active .ast-mobile-popup-inner { max-height: 100vh !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; position: relative !important; } /* Fix the navigation container */ .ast-mobile-header-wrap .main-header-menu, .ast-mobile-popup-drawer .main-header-menu { max-height: calc(100vh - 100px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Ensure submenu items are static positioned */ .ast-mobile-header-wrap .sub-menu, .ast-mobile-popup-drawer .sub-menu { position: static !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; max-height: none !important; height: auto !important; } /* Add bottom padding to prevent cutoff */ .ast-mobile-header-wrap .main-navigation > ul, .ast-mobile-popup-drawer .main-navigation > ul { padding-bottom: 150px !important; } /* Fix for Astra's mobile menu container */ #ast-mobile-popup, .ast-mobile-popup-drawer { height: 100vh !important; max-height: 100vh !important; } .ast-mobile-popup-drawer.active .ast-mobile-popup-content { height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Ensure the menu list itself is scrollable */ .ast-mobile-menu-wrap { height: auto !important; max-height: calc(100vh - 50px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Remove any transform that might affect positioning */ .ast-mobile-header-wrap .sub-menu li, .ast-mobile-popup-drawer .sub-menu li { transform: none !important; } }