Cannot Reformat Submenus in Columns Using Display: Flex

On this site, the submenu for “Areas of Services” > “California” is not putting the items in the order I have developed.

The items displaying are using a preset CSS style of ‘columns:3’:

I need:
1 2 3
4 5 6

I attempted to change the layout of the submenu using the following, but the width of the <ul> container is not widening.

ul#sm-16915505719580183-6 {
    display: flex!important;
    flex-flow: column wrap;
    width: 100%!important;
    columns: unset;
} {
 width: auto;
    min-width: 10em;
    top: auto;
    left: 0px;
    margin-left: 130px;
ul#sm-16915505719580183-6 li {
width: 33%!important;

I’m not sure what else within that <ul> container would not allow the <li> to respect the width set.

Thank you.

There won’t be a usable width as the width will be the width of the initial target element (basically one link wide).

You’ll need to force the width with a fixed measurement on the parent (such as 50vw) then divide the items inside by 3. (100% width is of no use to you here.)

Could be really tricky with all that’s going on there.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.