Centre the submenu arrow on its row - #351
Merged
Merged
Conversation
The right-pointing arrow on a second-level menu item sat well below the label
it belongs to, near the bottom edge of the row.
It is drawn by .dropdown:after, whose base rule centres the glyph with
top: 0;
line-height: 53px;
53px is the height of the 55px top-level menu bar, where that rule was designed
to work. A submenu row is 32px (6px padding + 20px line-height + 6px), so the
inherited line box put the glyph centre 27.5px down a 32px row -- 11.5px below
the label's own centre at 16px. Measured in the browser before and after:
before line-height 53px, top 1px -> glyph 27.5px vs label 16px
after line-height 32px, top 0 -> glyph 16px vs label 16px
Anchored to the link row via line-height rather than top: 50% + translateY,
because this li also contains its child <ul>: its own height is the whole
expanded block, not the row, anywhere that submenu is laid out in flow.
Desktop only in practice -- .mobile-menu .dropdown:after is display: none, the
mobile accordion using the .shapely-dropdown span instead.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The desktop fix hardcodes the 32px submenu row. Below 992px the same rows are
44px (10px padding + 24px line-height + 10px), so the arrow rode 6px high there.
Measured after this change:
1440px row 32px line-height 32px offset 0.0px
991px row 44px line-height 44px offset 0.0px
768px row 44px line-height 44px offset 0.0px
480px row 44px line-height 44px offset 0.0px
Also corrects the previous commit message: it claimed the arrow is hidden below
992px because of .mobile-menu .dropdown:after { display: none }. That rule is
inside @media (min-width: 992px) -- it applies to the mobile-style menu *option*
at desktop widths, not to narrow viewports. The arrow does render below 992px,
which is exactly why it needed its own value.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The right-pointing arrow on a second-level menu item sat well below its label,
down near the bottom edge of the row.
Cause
.dropdown:aftercentres the glyph usingtop: 0; line-height: 53px— 53pxbeing the height of the 55px top-level menu bar, which is where that rule
was written to work. A submenu row is 32px (6px padding + 20px line-height +
6px), so the inherited line box placed the glyph centre 27.5px down a 32px row,
11.5px below the label's centre at 16px.
Measured in the browser:
Why line-height rather than
top: 50%+translateY(-50%)The obvious fix centres against the
li. That is wrong here: thislialsocontains its child
<ul>, so its height is the whole expanded block rather thanthe row, anywhere the submenu is laid out in flow. Anchoring to the link row via
line-heightis correct in both cases.Scope
Desktop only in practice —
.mobile-menu .dropdown:afterisdisplay: none,the mobile accordion using the
.shapely-dropdownspan instead. Verified across1440 / 991 / 768 / 480px.
Stylelint clean (0 errors; the 48 warnings are pre-existing).