- This topic has 17 replies, 2 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
November 26, 2019 at 1:31 am #1077529gedosan
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!
November 26, 2019 at 4:52 am #1077751DavidStaffCustomer SupportHi there,
this document will help do that:
https://docs.generatepress.com/article/building-simple-mega-menu/
November 26, 2019 at 5:29 am #1077797gedosanPerfect thanks
November 26, 2019 at 5:33 am #1077807DavidStaffCustomer SupportYou’re welcome
November 26, 2019 at 5:48 am #1077838gedosanOne 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.
November 26, 2019 at 6:45 am #1077897DavidStaffCustomer SupportSimplest 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.
November 26, 2019 at 6:45 am #1077898gedosanSorry, and another Q – how do I make the menu full width, like in the example I showed you?
Cheers
November 26, 2019 at 6:47 am #1077901DavidStaffCustomer SupportSimplest way is to Customizer > Layout > Header –> Enable Navigation as header
November 26, 2019 at 7:11 am #1078070gedosanGreat – 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
November 26, 2019 at 7:20 am #1078089DavidStaffCustomer SupportSorry made a mistake in the CSS – updated here
You can change the colors in Customizer > Colors > Primary Navigation –> Sub Menus
November 26, 2019 at 7:43 am #1078124gedosanThanks – 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
November 26, 2019 at 8:54 am #1078224DavidStaffCustomer SupportWith 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 */ }
November 26, 2019 at 9:19 am #1078275gedosanVery 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
November 26, 2019 at 9:23 am #1078279DavidStaffCustomer SupportRemove 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.November 26, 2019 at 9:34 am #1078291gedosanPerfect, 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
-
AuthorPosts
- You must be logged in to reply to this topic.