[Resolved] Creating Multiple Rows for Side Menu Child Items

[Chris]

Hello,
I am moving my site from Joomla to WordPress and am trying to keep some of the old functionality. I am using the secondary navigation menu in the left sidebar of Generatepress.

Some of the menu items have more than 10 child items and when I hover over them the child item sub-menu is way too long and disappears off the bottom of the screen.

Is there a way to render the child menu in multiple columns?

Please see my current site sidebar menus here for an example of what I would like to do:
http://www.internationallovesccout.com

Thanks!

[David]

Hi Chris

this article on building simple mega menu may be a good place to begin:

https://docs.generatepress.com/article/building-simple-mega-menu/

[Chris]

Hi,

Thanks for the reply. Adding the Mega Menu got me half the way there, but it looks like it was designed for horizontal menus – not vertical. There are 2 problems:
1. The child menu does not fly out to the right – it covers the first level menu.
2. I used the “mega-menu mega-menu-col-2” – But the 2 columns are not wide enough.

You can see the problem here:
http://www.internationallovescout.info

Are there any other css classes that work with vertical menus?

Thanks!

[David]

Hi Chris,

Look for this section of the CSS you added:

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
    }

and remove the left: 0 !important; property so it reads like this:

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
    }

[Chris]

Thanks for the reply!

That solved half the problem. The sub-menu now floats nicely to the right, but it is still too narrow and crowds the menu item text.

I tried adding this to make the sub menu ul wider but it did not seem to work:

nav .main-nav .mega-menu ul .sub-menu {
width:500px;
}

Any suggestions?

Thanks!

[David]

Hi Chris, so the same statement as above ie:

nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
}

Change the width property to width: 300px !important;

[Chris]

Perfect! Thanks alot!

[David]

You’re welcome Chris

[Author]

Posts