I’m working on a new WordPress site that has long dropdown navigation menus. I wanted to make the dropdowns two-column, but only if there are at least five items in the submenu.
The two-column part is easy:
.sub-menu {
column-count: 2;
}
I’ve (finally) been learning more about some of the “new” conditional selectors in modern CSS over the past year or so. It occurred to me that there might be a very easy way to do this, checking if the submenu has at least 5 items. But I wasn’t sure it would work, so… I tried it:
.submenu:has(.menu-item:nth-of-type(5n)) {
column-count: 2;
}
Much to my delight, it works! Submenus with four or fewer items are displaying as a single column, and the ones with at least five are displaying as two columns.
Now, this of course is using CSS classes WordPress creates for its navigation menus, so if we were talking about barebones vanilla HTML5, you could use this:
ul:has(li:nth-of-type(5n)) {
column-count: 2;
}
This also doesn’t really account for tertiary nested menus, but I only have this site set up to display two levels of depth on its nav menu.