Primary Navigation Submenu is showing in single line end to bottom,

Hi there,

add this CSS to your site:

@media(min-width: 769px) {
    .has-columns>ul {
    column-count: 3;
        width: max-content !important;
    }
    .has-columns>ul>li {
        break-inside: avoid-column;
    }
}

Then add the has-columns class to the parent menu item you want the sub menu to show columns.

Thank you, but I Dont know coding. Is it possible to explain me how to add the?has-columns?class to the parent menu item that I want the sub menu to show columns.

In Appearance > Menus, there is an option to add CSS Classes to menu items.

This doc shows how:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

I know the option, and I done the same but nothing happen because I didn’t changes what you told in last line “Then add the?has-columns?class to the parent menu item you want the sub menu to show columns.” because I dont know how to do the same.

Add this CSS to your Customizer > Additional CSS:

@media(min-width: 769px) {
    .has-columns>ul {
        column-count: 3;
        width: max-content !important;
    }
    .has-columns>ul>li {
        break-inside: avoid-column;
    }
}

Then go to Appearance > Menus.
Enable the CSS Classes option as shown in this document:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Edit the Jobs by State menu item and in the CSS Classes field you add: has-columns

Thank You So much , Problem is solved

You’re welcome