[Support request] Mega Menu Format

[drumelie]

Hi, I am using the CSS code provided at the link below to create a mega menu under the ‘Local Groups’ Parent Item.

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

I am using the column class ‘mega-menu-col-4’ to generate 4 columns.

I would like the Child Items (days of the week) to break to a new row after the 4th column, so that everything looks nice and organized.
The first four Child Items (Monday, Tuesday, Wednesday, Thursday) should be on the first row.
Then Child Items ‘Friday’, ‘Saturday, ‘Sunday’ should break to a new row.

Please can you assist me with this?

[Tom]

Hi there,

I’m not sure I understand. Do you have an example or screenshot of what you’re wanting to achieve?

[drumelie]

I am adding ‘before’ and ‘after’ screenshots. The ‘after’ screenshot is what I would like to achieve in GP.

I created the ‘after’ screenshot with the Max Mega Menu plugin, but I would prefer not to have to use this plugin, as it takes over the entire menu. I still want the option to add a logo using GP, etc.

Thank you in advance for any assistance.

[Tom]

I believe to keep the items in the same column, they would have to be on the same level (ie Grandchild items: https://docs.generatepress.com/article/building-simple-mega-menu/).

Then you could give the headings a custom class to turn them red.

Let me know if that makes sense or not 🙂

[drumelie]

I can get them in the same column using this method, but the Friday Saturday, Sunday headings are not aligned horizontally. The problem is not solved by adding blank menu items, as some of the menu items above take up 2 lines.

I am using padding to adjust, but that does not seem like the best method, as it will require manual adjustment every time a new menu item is added.

Is there a better way to align the additional headings?

I just discovered that this method also does not work on mobile.

As always, thank you.

[Tom]

Hmm, unfortunately it might be necessary to use the plugin to achieve something more advanced like this.

The CSS method works, but it’s very simple and limited unfortunately.

[drumelie]

Thank you, Tom. I really appreciate you looking into this and providing helpful guidance. I was hoping to avoid having to use the plugin, but I agree that it provides the more advanced features for what I want to do. I am using GeneretePress for the first time on this project and really enjoying it.

[Tom]

Great to hear! Sorry I couldn’t be more helpful with this!

[Author]

Posts