Target all dropdown menus
@media(min-width:767px) {
/* When hovering over a menu item that has children, display its submenu as a grid */
selector .menu-item-has-children:hover .sub-menu {
display: grid !important;
}
/* Set up the submenu's grid layout */
selector .sub-menu {
grid-template-rows: repeat(6, auto); /* Creates 6 rows in the grid, each auto-sized */
grid-auto-flow: column; /* Arranges grid items into columns */
gap: 10px; /* Adds 10px of space between grid items */
width: fit-content !important; /* Sets the width to wrap around its content */
}
}
/* Adjust submenu position for screens smaller than 2140px */
@media(max-width:2140px) {
/* Moves submenu for .menu-item-83 to the left by 300px */
selector .menu-item-83 .sub-menu {
left: -300px !important;
}
}
/* Adjust submenu position for screens smaller than 1534px */
@media(max-width:1534px) {
/* Moves submenu for .menu-item-83 further left by 480px */
selector .menu-item-83 .sub-menu {
left: -480px !important;
}
}
Target specific dropdown menu
/* For screens larger than 767px, this style controls the dropdown menu layout */
@media(min-width:767px) {
/* Display submenu as grid when hovering over menu item 126 */
selector .menu-item-126.menu-item-has-children:hover .sub-menu {
display: grid !important;
}
/* Define grid structure for the submenu: 6 rows with automatic sizing,
flow in columns, with a gap of 10px, and fit-content width */
selector .menu-item-126 .sub-menu {
grid-template-rows: repeat(6, auto);
grid-auto-flow: column;
gap: 10px;
width: fit-content !important;
}
}
/* Adjust the left position of the submenu for screens up to 1845px */
@media(max-width:1845px) {
/* Offset submenu 200px to the left for alignment adjustments on medium-large screens */
selector .menu-item-126 .sub-menu {
left: -200px !important;
}
}
/* Further adjust the left position of the submenu for screens up to 1328px */
@media(max-width:1328px) {
/* Offset submenu 400px to the left for alignment adjustments on smaller screens */
selector .menu-item-126 .sub-menu {
left: -400px !important;
}
}