Nav menu items can overflow outside of container

I have tested the above patch on 9.2,the patch applied cleanly but it does not fix the issue.

After patch LTR

After patch RTL

Patch is resolved this issue please see the screen short for clarification.

Thanks!

Hi @bnjmnm,

Thank you for your feedback.

I re-uploaded patch by running yarn watch.

Please review.

I tested 3186992-9.patch patch with extra menu items. For alignment working good. But after scroll, the page down the menu items design is breaking. That is not looking good.
Please find the screenshot.

Applied patch #9 and also updated new patch for navigation scroll alignment. Please review it.

@babusaheb.vikas : I have applied the patch for scrolling menu but it's not proper solution for default theme. I have did override padding for specific scrolled navigation but it's just for some limited links (like max 2 lines). After adding more links(more than 2 lines) it will breaking again. so, as per requirement need to override css.

Main menu show for clear and concise, need to change navigation as per below suggestions.

- Reduce number of top level links
- Reduce length of link titles
- Reconsider menu hierarchy
- Reduce font size
- Remove 'Home' link because if you clicking on the logo in your Header will take you back to the homepage.

Please review updated patch.

Applied patch #14 and it works fine.Adding screenshots below.

Looks good to me, Moving to RTBC

+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
@@ -55,13 +55,17 @@ body:not(.is-always-mobile-nav) {
+    & .js-fixed .primary-nav__menu-link-inner {

We shouldn't use js- prefixed classes for styling since they are only supposed to be used for functionality. For more info, see #2431671: [meta] Add in js- prefixed classes for separation of JS & CSS functionality.

@lauriii removed

@@ -55,13 +55,17 @@ body:not(.is-always-mobile-nav) {
+    & .js-fixed .primary-nav__menu-link-inner {

as it was not affecting menu because .js-fixed class comes into play when menu is closed. Quick and easy patch applied .

Applied patch #19 and it works fine. Adding screenshots below.

1+ RTBC

Applied patch #19 and it worked fine.

Before patch:

After patch:

RTBC +1

Restoring status after HEAD was broken.

Re-Rolled with 9.3.x

Kindly review the attached patch.

Thanks!

Hi @kiran,
Verified and tested patches #29.
The patch does not apply successfully.

Please refer attached screenshots.
Moving to Needs work.

Hi, @kiran Thank you for the patch.
Verified and tested patch #29.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance: Apply Olivero theme
# Goto admin/structure/menu
# Add 7-8 menus under the main navigation
# See the results

Expected Results:
# Navigation menu items should not overflow outside of container.

Actual Results:
# Navigation menu items can overflow outside of container.

Please refer attached screenshots.
Looks good to me.
Can be a move to RTBC.

@lauriii and I discussed this and agreed that this can be committed once the 9.3 alpha freeze is over.

Reviewed this issue and I think this is ready to be committed after the alpha freeze ends.

Removing the needs subsystem maintainer review tag since I don't think this actually needs subsystem maintainer review.

Committed and pushed 4063e76cbe to 9.4.x and beb3bf6e6c to 9.3.x. Thanks!

Backported to 9.3.x as olivero is not stable yet and might be marked stable in 9.3.0.

@alexpt I think this functionality is incomplete. There should be an option in the Olivero theme configuration to set the menu to 2 lines or to put the menu in mobile mode when the links touch the logo + name area.

Here is an example, reducing the window in width. When one of the menu links touches the logo area + no, it automatically switches to mobile mode :

https://www.clubic.com/

In my case (see screenshots), I would like that when the menu touches the gray area (logo + site name), it automatically switches to mobile mode.

@zenimagine can you open a follow-up issue for that?

yes

Opened up #3247269: Olivero: Alignment of primary menu hover states and dropdowns is incorrect at wide widths as a regression to this issue.

Sorry I've been out for a bit, I've been meaning to review this but a good amount of personal stuff got in the way.