Hello @lpsinger,

Thank you for flagging this bug and your contribution to resolve!

Looking into the file changes, it appears the padding was removed in #4708. I believe it was removed because the hover state would not trigger when the padding is hovered.

We can get the best of both worlds by moving the padding to the left and right of the submenu item anchor tags! Using the u-padding-x()

.usa-nav__submenu-item {
    @include at-media($theme-header-min-width) {
      a {
+       @include u-padding-x(2);
- 	 padding: units(1);
	...
	}

This way, the navigation links will have the same layout as before, while being able to be hovered all the way to the edge of the dropdown. 👍

Let me know what you think!

Note
Vertical padding matches develop with this alternative. The proposed solution adds vertical padding to the menu.
If we want to increase vertical padding we can do so on the anchor element as well.

It's looking great to me! Just one minor change to for code consistency 👍

Looks great! Thanks for your responsiveness on this @lpsinger !

• Resolves visual regression
• Allows proper hover states
• Passes linting and prettier checks

Thanks for submitting this fix!

No issues with the default & extended, but question on megamenu variants. Tested small & large screen sizes.

Megamenu & Megamenu Extended padding

@thisisdano should the first column align with header logo on megamenu variants?

Header previews

Thank you for submitting this! The alignment is looking better. Before final merge, I'd like to confirm how this interacts with #5630 but I think this is good to merge into the feature branch.

• Confirm that the updated horizonal padding value matches the padding for .usa-nav__primary button in desktop view.

• Confirm no visual regressions on the vertical padding in desktop view

  • Note: the vertical margin between links is the same as in develop, but there is additional vertical padding on the submenu element. I do not consider this to be a regression because it allows the vertical padding to match the increased horizontal padding.

  

.usa-nav__submenu {padding:1rem}
.usa-nav__submenu .usa-nav__submenu-item a {padding:0}
.usa-nav__submenu .usa-nav__submenu-item+* {margin-top: .75rem}

A couple of thoughts for future consideration:

• Since there are visual changes for this addition, should it be considered enough of a breaking change to push it to a minor release? @mejiaj @mahoneycm
• It might be beneficial for users if we created a theme setting for the horizontal padding on these elements, rather than hard-coding the values. Something to consider as a possible future enhancement.
• Alternatively, we could also consider creating a horizontal padding variable inside `_usa-nav.scss" to ensure consistency across elements in the nav.