[Resolved] Mega Menu – great grandchildren

[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

[Tom]

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 🙂

[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

[Tom]

Give this CSS a shot:

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

[Robyn]

That works perfectly. Thank you very much.

[Tom]

You’re welcome 🙂

[Author]

Posts