Two column main menu submenu

Hi there, I am trying to split one long menu on my site (www.enigmar.net) into two columns (just for the one menu, not the whole site). However the code I have does not work. I would appreciate if you would kindly check. It may be I do not have the right classes etc for Sydney, or the right hooks. This is the code.

1] In appearance>menus add class “sub-menu” in CSS classes field of the specific menu.
2] In customise css add:

    .sub-menu {
    width: 400px:
    }

3] In customise css add:

    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }

    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }

I’ve tried one or two variations with this code but not success so far. Also tried placing it in child theme style.css but also no success.

Please help!
Thanks so much

The theme already has .sub-menu class. And I think you should use other one in order to avoid script conflict. May be my-sub-menu would work for you? Let me know your views.

Regards,
Kharis
aThemes Support

The code is correctly referring to the existing sub-menu class of the theme. The class being created is sub-menu-columns so why would that clash with sub-menu class?. In any case I did try your suggestion and nothing works.
Any further ideas? Thank you for your help

Hi,

Thank you for getting back.

Can I request for a design that shows me the final result you want to have with the menu? I could suggest you with the working code when I got the design requirements clearly.

Regards,
Kharis
aThemes Support

Hi Kharis,
Firstly this is the problem. By defaul Sydney offers a one column menu system, which drops down, does not scroll with the user, while sub menus drop down to one side. Here is what happens with long menus, where the rest of the submenu is hidden. The issue refers to desktop computers, not with mobile. Go to www.enigmar.net to see.

As I see it there are four ways to solve this (aside from redisigning the menu, reduing the text size and leading etc):
1] Create two column menus, which seems the best option.
2] Allow menus to scroll up with the page (probably tricky for users not to lose focus)
3] Make the sub menu display upwards instead of downwards
4] Set sub menus to fly out sideways, left or right depending on the location on the page of the specific drop down menu.

Suggested solution. Using the code I sent you the idea is for longer menus to have two columns.

An optional extra woud be for submenus that might run off the bottom the screen to be displayed above instead of below.

Many thanks for your help

Hi,

Thank you for getting back along with the designs as requested and extra details.

Seems likely your submenus structure is too complex. And I am fraid that CSS coding alone wouldn’t be enough due screen size limitations on different devices.

The best approach to achieve it is using an extra menu plugins. We have a set of plugins here that may be interesting for you to check.

Regards,
Kharis
aThemes Support