Creating Multiple Rows for Side Menu Child Items

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/

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!

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%;
    }

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!

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;

Perfect! Thanks alot!

You're welcome Chris