Divide Sub-Menu into multiple columns

  • Hello,

    My sub-menu has over 30 elements, and it’s very long which goes all the way over the screen (and some elements are not visible at all because of it).

    I need help figuring out a way to divide it into 2 or more columns so there’s around 4-5 entries per column.

    I’ve tried using CSS code https://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/

    The result of this would be ideal, but I’ve followed the process to a T, but it made no changes whatsoever.

    Is there any other CSS code out there to achieve this? I want to keep the same style, so having the Mega Menu’s isn’t an option.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @isntisni

    I would recommend organizing your menu in a different way. We can of course force the layout to two columns, but you will still run into issues with mobile devices for example. Try creating a different menu or spreading items across multiple levels (level 3, 4, etc.). See: https://learn.www.ads-software.com/lesson-plan/managing-menus/#arranger-menu-items

    Otherwise, if you really want to have a two-column submenu and don’t care about mobile devices, you can use the following CSS snippet:

    /**
 * Two-Column Dropdown Menu
 * https://www.ads-software.com/support/topic/divide-sub-menu-into-multiple-columns/
 */
@media (min-width: 992px ) {

  .header .navbar-container .main-menu li.two-columns ul.dropdown-menu > li.menu-item {
    width: calc(50% - (var(--wp--preset--spacing--50) / 2));
  }

  .header .navbar-container .main-menu li.two-columns:hover > .dropdown-menu {
    min-width: 460px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--wp--preset--spacing--50);
  }
  
}

    Then, you can enable the two-columns effect on a specific sub-menu by adding the two-columns class to “services” item. Check this to do so: https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

    Best of luck!

Viewing 1 replies (of 1 total)
  • The topic ‘Divide Sub-Menu into multiple columns’ is closed to new replies.