Improve alignment of top navigation items with grid

[bartaz]

Context

Padding in top navigation items is different from padding on the grid. We want text of first item of top navigation to align with the content on the page below it. Hoverbox of the item should stick outside of the grid (text is aligned, but navigation items actually expands to the left).

Currently, because padding on item and grid are different they would misalign like this (if we align navigation with outside margin of the grid:

Or like this (if we align both using same grid padding):

Visual

On canonical.com it's hacked with some undocumented usage of grid in top navigation and negative margin:

We want to achieve this in docs layout as well (currently local styles):

We need to update the top navigation to improve the alignment with the grid below it, while making sure it still works on small screens and doesn't affect older websites that may still use old layout.

[lyubomir-popov]

Maybe we can modify the hover/active state to not use padding-left: (Just a thought, we need to discuss this in the Design team)

[bartaz]

Another (relatively simple to implement) solution could be to increase hover area padding to 1.5rem (making it the same as grid margin) so that it aligns naturaly:

Although it does create 3rem space between unselected navigation items making it probably wider than needed (and may make some sites not fit their navigation - although we did increase the grid width in 4.0 so we have more space there).

[lyubomir-popov]

THat works for me. We've increased the fixed width fro m72 to 80 rem, which should compensate. Happy to go with that but we need to test maas and other sites with large numbers of menu items

[bartaz]

In JIRA as: WD-8284