Olivero: No need to open list of submenu at hovering on outside the menu text.

This is because of excessive padding on both the top and bottom side of the menu item.

Hi I am facing same issue , Below solution solve my issue

.primary-nav__menu-link-inner:hover {
    padding-top: 0px;
    padding-bottom: 0px;
}

If we apply the above code

.primary-nav__menu-link-inner:hover {
    padding-top: 0px;
    padding-bottom: 0px;
}

then on-focus below line will not have spacing.

Adding screenshot for same.

Perhaps explicitly setting the padding as 0 top and bottom isn't the way to go, the excess padding seems to be coming from

 body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
      padding-top: 2.25rem;
      padding-bottom: 2.25rem;
      transform-origin: center;
      border-top-width: 9px;
    }

The removal of the padding top and bottom from the above selector means this falls back to

.primary-nav__menu-link-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
}

Which looks more appropriate in my implementation. Ill add a patch that works for me.

I might need to have another look at this, the patch means any menu with children is a little too congested when its active.

Attaching a patch that fixes a couple of problems ive seen from reducing the padding

1. The menu item bottom border displays along with any child item (this was present before, but the bottom border would show behind the menu item, although you can see the behaviour sliding in just before the menu item opens - its there in the gif attached to the opening post as well)
2. The child item was too congested (too close to the parent)

Im unaware of the intended design of the bottom border with a child menu item open, but it doesnt feel correct to show the border and the child item.

Feedback welcome.

Just noticed the module is using postcss, attaching a patch with both .css files.

Fixing an oddity.

Hi @aaron.ferris,
Patch #12 works fine for me.

Patch #12 applied cleanly and it is working well. Screenshot for reference.

@hinal05 Unable to apply the patch , patch failed. Screenshot for your reference

@Madhu_kumar #17 hinal's Patch applied successfully
looks good to me
marking as RTBC..

@hinal05 The patch cannot be applied, the patch has failed.
Screenshot for viewing

@hinal05 your patch is applied and resolving side spacing in dropdown but when i tested it's creating another issue, for issue please review the attachment which i provided.

Thank you!

@djsagar Thanks for the screen video. I checked Olivero-POC there is also having the same behavior/issue so this issue is not because patch #17

Olivero-POC URL: https://olivero-poc.netlify.app/

Please check and confirm.

Thanks!

@kiran.kadam911 same issue find in URL which you shared.

Olivero-POC URL: https://olivero-poc.netlify.app/

Please check attachment.

Thanks!

Providing updated version of patch #17 as per comment #22 Fixed the submenu jerk issue.

Thanks!

Issue no #22 is resolved after applying patch #26, marking as RTBC.

Video attached for prove.

@Sakthivel M Thanks for the patch, it applied successfully. But there is some new issue after applying the patch.

Below are the issue and screenshots:

1. In mobile navigation alignment issue of menu text and plus/minus icon

   

   

   Solution: Remove line-height for mobile navigation (below 1200) or Apply line-height only for desktop (above 1200). So that total auto height of first level li will be 54 as pe POC site https://olivero-poc.netlify.app/

2. On focus primary-nav__button-toggle outline getting cut off.

   

   Solution: Update width of body:not(.is-always-mobile-nav) .primary-nav__button-toggle from 16px to 21px

Rest other things are fine.

Thanks!

Providing updated version of patch #29 as per comment #28, Please verify it.

sorry, #29 wrong patch uploaded

#29 wrong patch uploaded.

Providing updated version of patch #30 as per comment #28, Please verify it.

Just re-rolled the patch for 9.3.

Verified and tested patch #31.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: admin/structure/menu/manage/main?destination=/admin/structure/menu
# Create the Menus
# Save it
# Check the results

Expected Results:
# User should see a focus on primary-nav__button-toggle
# User should see open list of submenu at hovering on menu test or dropdown (based on line-height) Please check #28 comment

Actual Results:
# User is not able to see a focus on primary-nav__button-toggle
# User is able to see open list of submenu at hovering on menu test or dropdown but User is able to see the big margin between menu text and the blue line (which is coming once hovering on the menu)

Note: Alignment issue of menu text and plus/minus icon is not part of this issue.

Looks good to me.
Can be a move to RTBC.

#35 re-rolled the patch

Verified and tested patch #38
patch applied successfully

This seems like a personal opinion, but I honestly don't see why this is a problem.

Changes like this can cascade and affect the layout. If this was an issue (I don't believe it was), it should have been brought up in #3088378: Designs for new front-end theme for Drupal 9.

We're not making arbitrary design changes at this point in development.