Secondary Menu

[gedosan]

Hi guys

Curious to know how to build a fly out menu like the guys have here (see below).

When you hover over any menu item at the top, you get a full width menu appear that’s neatly organised by category.

Not sure if this is possible right out the box?

Thanks!

[David]

Hi there,

this document will help do that:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Perfect thanks

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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

Cheers

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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

[David]

Sorry made a mistake in the CSS – updated here

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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

[David]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

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

[Author]

Posts