Menu design improvement

Hello,

The W3CSS theme and Solo theme are designed to support a three-level menu structure. The menu was not originally intended to accommodate a fourth level, which is why the behavior appears as it does in your screenshot. Since you have added a fourth level, you would need to create custom CSS to properly support this addition in the main menu.

Best wishes,
Alaa

Thank you for the very quick answer.
Which CSS I have to change?
Can you give me some tipp's for changing.

Rgds
Uwe

Hello,

Since there isn't a specific file or CSS to modify, you'll first need to create a custom sub-theme. Once that's set up, you can add support for a fourth-level menu. The next step is to debug using browser inspection tools to identify any styling issues.

Make sure to test how the menu behaves on both large and small screens. For hover menus, you won’t need to add JavaScript, but for click-based menus, you may need to implement some JS to ensure proper functionality.

Best wishes,
Alaa

Is the any description here on drupal.org ?

Hello,

I don't think this would be added as a feature. However, I'm not sure if this would be a good fit for Drupal.org, as it seems more like pure CSS rather than something specific to Drupal. It might be helpful to look into how multi-level menus are typically developed. The good thing is that you're not creating the HTML—you're just applying CSS styles.

Best wishes,
Alaa

Hello,

Based on valuable feedback from the Drupal community, Solo officially will supports fourth-level navigation menus in the next release.

Why This Matters
Many users requested the ability to create deeper, more complex menu structures — especially for large sites with multi-level content hierarchies, product catalogs, or mega menu requirements.

Previously, Solo focused on a clean, accessible 3-level menu structure, optimized for performance and simplicity. However, after carefully evaluating real-world use cases and listening to user feedback, fourth-level menu support has been added — with full consideration for:

• Accessibility best practices (ARIA roles, keyboard navigation)
• Responsive behavior on mobile and desktop
• Automatic submenu positioning (smart flip logic)
• Clean, maintainable CSS and JS handling
• RTL (Right-to-Left) language support

Best wishes,
Alaa