[Resolved] Mega Menu – great grandchildren

Home Forums Support Mega Menu – great grandchildren

  • This topic has 5 replies, 2 voices, and was last updated 10 months ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1068899
    Robyn

    Is there a way to add one more layer of children to the GP mega-menu?

    currently I have this:
    https://snipboard.io/7V6Z23.jpg

    And I would like the last column to have one more layer:

    https://snipboard.io/9B8jbU.jpg

    I am using the regular CSS from GP:

    /* GeneratePress Mega Menu */

    @media
    (min-width: 769px) {
    nav .main-nav .mega-menu {
    position: static;
    }

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

    nav .main-nav .mega-menu > ul > li > a {
    font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    }

    nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
    width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
    width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
    width: 20%;
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*=”current-“] > a,
    nav .main-nav .mega-menu ul ul {
    background-color: transparent !important;
    color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    width: 100%;
    box-shadow: 0 0 0;
    left: 0;
    height: auto;
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
    pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }
    }
    /* End GP Mega Menu */

    Live Site: lovecanary.ca – SHOP menu

    #1069200
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Should be possible with some CSS, but it looks like you’ve switched up the site a bit. If you want to add another level and let us know where to look, we’ll see what we can do 🙂

    #1069318
    Robyn

    So sorry! I was playing around.

    Here’s a screen shot of the way the menus are set up:
    https://snipboard.io/BWN5yU.jpg

    I would like the “Accessories and Handbags” and “Bracelets” to be indented under their parent.

    -Robyn

    #1069413
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

    nav .main-nav .mega-menu ul ul .sub-menu {
        margin-left: 15px;
    }
    #1070924
    Robyn

    That works perfectly. Thank you very much.

    #1071064
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.