[Resolved] Creating Multiple Rows for Side Menu Child Items

Home Forums Support [Resolved] Creating Multiple Rows for Side Menu Child Items

Home Forums Support Creating Multiple Rows for Side Menu Child Items

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #582297
    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!

    GeneratePress 2.1.2
    #582781
    David
    Staff
    Customer Support

    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/

    #582847
    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!

    #582861
    David
    Staff
    Customer Support

    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%;
        }
    #583283
    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!

    #583333
    David
    Staff
    Customer Support

    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;

    #583491
    Chris

    Perfect! Thanks alot!

    #583497
    David
    Staff
    Customer Support

    You’re welcome Chris

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.