7b75dc5522
- Created hvac-navigation-fix.css to work with span.menu-toggle elements - Fixed hover states for menu items using spans instead of anchors - Ensured proper display/visibility/opacity transitions - Added z-index layering to prevent conflicts - Mobile responsive behavior maintained The issue was that the menu uses span.menu-toggle instead of anchor tags, so the CSS selectors needed to be updated to match the actual HTML structure.
163 lines
No EOL
4.6 KiB
CSS
163 lines
No EOL
4.6 KiB
CSS
/**
|
|
* HVAC Navigation Fix
|
|
* Fixes dropdown functionality for the actual menu structure
|
|
*
|
|
* @version 2.0.1
|
|
* @since 2025-08-21
|
|
*/
|
|
|
|
/* Fix for menu items using span.menu-toggle instead of a tags */
|
|
.hvac-trainer-menu .menu-item-has-children > .menu-toggle {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
padding: 18px 16px;
|
|
color: #374151;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
/* Hover effect for menu toggles */
|
|
.hvac-trainer-menu .menu-item-has-children > .menu-toggle:hover {
|
|
color: var(--hvac-primary-500, #0274be);
|
|
background: rgba(2, 116, 190, 0.05);
|
|
}
|
|
|
|
/* Fix dropdown visibility on hover */
|
|
.hvac-trainer-menu .menu-item.has-children:hover > .sub-menu,
|
|
.hvac-trainer-menu .menu-item.has-children:focus-within > .sub-menu,
|
|
.hvac-trainer-menu .menu-item.has-children.menu-open > .sub-menu {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
/* Ensure submenus are properly styled */
|
|
.hvac-trainer-menu .sub-menu {
|
|
position: absolute !important;
|
|
top: 100% !important;
|
|
left: 0 !important;
|
|
min-width: 220px !important;
|
|
background: #ffffff !important;
|
|
border: 1px solid #e5e7eb !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
|
|
padding: 8px 0 !important;
|
|
margin: 0 !important;
|
|
list-style: none !important;
|
|
z-index: 9999 !important;
|
|
|
|
/* Hidden by default */
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
transform: translateY(-10px) !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
/* Dropdown arrow animation */
|
|
.hvac-trainer-menu .menu-item-has-children .dropdown-arrow {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.hvac-trainer-menu .menu-item-has-children:hover .dropdown-arrow,
|
|
.hvac-trainer-menu .menu-item-has-children.menu-open .dropdown-arrow {
|
|
transform: rotate(180deg);
|
|
color: var(--hvac-primary-500, #0274be);
|
|
}
|
|
|
|
/* Submenu items */
|
|
.hvac-trainer-menu .sub-menu .menu-item {
|
|
margin: 0 !important;
|
|
width: 100% !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.hvac-trainer-menu .sub-menu .menu-item > a {
|
|
display: block !important;
|
|
padding: 10px 20px !important;
|
|
color: #4b5563 !important;
|
|
font-size: 14px !important;
|
|
font-weight: 400 !important;
|
|
text-decoration: none !important;
|
|
transition: all 0.2s ease !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.hvac-trainer-menu .sub-menu .menu-item > a:hover {
|
|
color: var(--hvac-primary-500, #0274be) !important;
|
|
background: rgba(2, 116, 190, 0.05) !important;
|
|
padding-left: 24px !important;
|
|
}
|
|
|
|
/* Fix for nested dropdowns */
|
|
.hvac-trainer-menu .sub-menu .sub-menu {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 100% !important;
|
|
margin-left: 4px !important;
|
|
}
|
|
|
|
/* Keep dropdown open when hovering over submenu */
|
|
.hvac-trainer-menu .sub-menu:hover {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Mobile responsive - hide hover behavior */
|
|
@media (max-width: 992px) {
|
|
.hvac-trainer-menu .menu-item.has-children:hover > .sub-menu {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* On mobile, only show when explicitly opened */
|
|
.hvac-trainer-menu .menu-item.has-children.menu-open > .sub-menu {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
position: static !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
background: #f9fafb !important;
|
|
padding-left: 20px !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure proper z-index layering */
|
|
.hvac-trainer-menu-wrapper {
|
|
position: relative;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.hvac-trainer-menu {
|
|
position: relative;
|
|
z-index: 1001;
|
|
}
|
|
|
|
/* Override any conflicting styles */
|
|
.hvac-page-wrapper .hvac-trainer-menu .sub-menu,
|
|
.hvac-plugin-page .hvac-trainer-menu .sub-menu {
|
|
/* Force our styles with maximum specificity */
|
|
display: none !important;
|
|
}
|
|
|
|
.hvac-page-wrapper .hvac-trainer-menu .menu-item.has-children:hover > .sub-menu,
|
|
.hvac-plugin-page .hvac-trainer-menu .menu-item.has-children:hover > .sub-menu {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
} |