- This topic has 17 replies, 2 voices, and was last updated 3 years, 2 months ago by
David.
-
AuthorPosts
-
November 26, 2019 at 1:31 am #1077529
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!
November 26, 2019 at 4:52 am #1077751David
StaffCustomer SupportHi 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/November 26, 2019 at 5:29 am #1077797gedosan
Perfect thanks
November 26, 2019 at 5:33 am #1077807David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 5:48 am #1077838gedosan
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.
November 26, 2019 at 6:45 am #1077897David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 6:45 am #1077898gedosan
Sorry, 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 #1077901David
StaffCustomer SupportSimplest way is to Customizer > Layout > Header –> Enable Navigation as header
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 7:11 am #1078070gedosan
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
November 26, 2019 at 7:20 am #1078089David
StaffCustomer SupportSorry 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/November 26, 2019 at 7:43 am #1078124gedosan
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
November 26, 2019 at 8:54 am #1078224David
StaffCustomer 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 */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 9:19 am #1078275gedosan
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
November 26, 2019 at 9:23 am #1078279David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 26, 2019 at 9:34 am #1078291gedosan
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
-
AuthorPosts
- You must be logged in to reply to this topic.