Elementor Multi-Column Dropdown

Facebook
Twitter
Reddit
WhatsApp

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;
    }
}
				
			
Subscribe
Notify of
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

More to explorer

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.