Secondary Menu

Hi there,

this document will help do that:

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

Perfect thanks

You're welcome

One Q - is it possible to have the child just a title, not a link? So the mega menu is grouped into categories but the category titles aren't links? Have added the page I'm working on to the ticket so you can see.

Simplest way is to add a CSS class those menu items eg.

custom-menu-label

@media (min-width: 769px) {
    .custom-menu-label > a {
        pointer-events: none;
    }
}

This will stop the link option on desktop but not on your mobile menus where the you will probably need it to expand the submenus.

Sorry, and another Q - how do I make the menu full width, like in the example I showed you?

Cheers

Simplest way is to Customizer > Layout > Header --> Enable Navigation as header

Great - could you give me the CSS for the background (want to make it #ffffff) and control the size of the grandchildren (to make them smaller!) and reduce the vertical space between them please.

Cheers

Sorry made a mistake in the CSS - updated here

You can change the colors in Customizer > Colors > Primary Navigation --> Sub Menus

Thanks - anything I can do to reduce spacing between grandchildren / reduce size?
Also, I take it there's no way to go full width white? - take a look, you can see stuff either side of the nav when it's expanded.

Thanks

With in the @media (min-width: 769px) { add the following CSS:

/* reduced top and bottom spacing between child items to 4px */
.main-navigation .main-nav ul ul li a {
    padding: 4px 10px 4px 10px;
}

/* Allow mega menu to span full width */
.inside-navigation {
    position: static;
}

/* Center mega menu within container */
.dropdown-hover .main-navigation:not(.toggled) ul li.mega-menu:hover>ul {
    display: flex;
    justify-content: center;
}

Then find this block of CSS from the mega menu ( it'll be within an @media query), and add the additional property i have commented:

.main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    max-width: 275px; /* Add this property */
}

Very cool - managed to do most of it, take a look. I added a bit of padding to top and bottom to give it some space. I wanted the columns to be brought in a touch of the left and right too (tried padding left and right but didn't work). What do I need there?

G

Remove the padding left and right that you added.

This line: max-width: 275px; /* Add this property */ reduce the max-width to make each column smaller.

Perfect, last question then I promise I'll leave you alone! In the columns where I don't have many entries (eg the first column), I'd like to add another child and group of grandchildren to use the same space more effectively. Any way to do that?

G