I have been running the all-CSS Mini Mega Menu on a client site and it has been working well. There is only one “Mini Mega” dropdown with 28 menu items displayed in two columns. Now the client wants the menu items alphabetical order, with certain items in bold. I was able to do this with the current menu setup. There is an issue with this setup. On smart phones and tablets the menu changes to a single column and the left column and right column are combined. The menu is no longer in alphabetical order since the structure is really 14 two-column rows. I need an arrangement as shown in the image below.
Note that the top graphic illustrates how the current menu works. On the current website dropdown, the top row has item A in the left column and Item H in the right column. When the menu “wraps”, Item H moves under Item A, and so on until the two columns are combined. The original alphabetical listing is gone.
I need the entire right column to wrap beneath the left column.
I have experimented with a couple of the Mega Menu plugins, but they are a bit complex to set up and are overkill for just one dropdown submenu.
I tried the WP Mega Menu and Max Mega Menu Plugins.
Any suggestions you have on solving this issue are greatly appreciated.