Horizontal separator between menu items

Hi @fagfrank

let me start with this one:

And above all, do you have any tips for making the submenu appear default closed in mobile view?

The short answer for this one is no. For Twenty Twenty-Four the submenus are open by design. This was a decision made for accessibility and usability considerations.

In particular, I cannot insert a colored horizontal separator line between menu items because the “separator” block can no longer be inserted between menu items.

I’d expect this to be possible with some CSS code. Are you meaning you’d want these dividers to show only for mobile devices?

If you could share a URL to your current site – I’d be happy to take a look.

Hi Jordesign,
Thank you for your answers, here is the link where you can view the site under construction https://www.dueffecom.it/riva/?cmp_bypass=cantieresito

My thoughts on always-open submenus on mobile view are: I understand accessibility but it would be helpful to let the user decide how they want the menu to appear. Imagine a portal tree, made up of numerous first level, second level and maybe third level entries… how would the menu appear on the mobile device according to the current rules? …there would be a simply uninvitable UX!

As you can see, by opening the link above and in mobile view, I have difficulty inserting the logo image before the page list: it doesn’t let me zoom in and center the image.
I also inserted a separator under the page list via CSS but the result is not correct.

I await your news, thank you

Francesco

Hey @fagfrank ! A potential option might be using a plugin like Max mega menu, which will let you replace the navigation block with a customizable menu.

Hi Kavya Gokul,
I tried using Mega Menu Max but it’s not meant for Gutenberg themes and doesn’t work very well with them

@fagfrank – Ah I see. Beyond that I don’t really have a better suggestion regarding the expand/contract of the sub-menus.

I just had a look at the site – and it looks like you’ve got some horizontal dividers appearing there now as well. Did you find a way to do that with CSS?