Conversation
The Services panel opened whenever the pointer touched the bottom edge of the header, including well to the right of Contact by the social icons. The mega <li> is position:static so the panel can be full-bleed against the <nav>, which left it with no positioned ancestor of its own. The generic dropdown hover bridge (left:0; right:0; top:100%) therefore resolved against the full-width <nav>, stretching an invisible 8px hover target across the entire header instead of sitting under SERVICES. Exclude the mega item from the generic bridge and give it a replacement anchored to its link wrapper, with negative insets restoring the li's px-4 box so the trigger is exactly as wide as the visible item. The panel's own upward bridge stays full width, which is safe because the panel is pointer-events:none while closed. Verified with Playwright at 1024/1280/1440/1920. Bump theme version to 2.15.5.
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
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.
Version:
2.15.5Fixes a hover-target regression in the desktop header where the Services mega menu opened from anywhere along the header width, including far to the right of the Contact item next to the Mastodon, GitHub, and search icons. The root cause was an interaction between two existing rules in
resources/css/app.css: section 3.4 sets the mega<li>toposition: staticso the panel can render full-bleed against the<nav>, which leaves the item with no positioned ancestor of its own, so the generic dropdown hover bridge in section 3.3 (left: 0; right: 0; top: 100%) resolved its insets against the full-width<nav>and stretched an invisible 8px hover target across the entire header. The fix excludes the mega item from the generic bridge and gives it a dedicated replacement anchored to its link wrapper, with negative insets that restore the item'spx-4padding box so the trigger is exactly as wide as the visible menu item. The panel's own upward bridge is left full-width, which is safe because.submenu-listispointer-events: nonewhile closed and therefore only becomes a hover target once the menu is already open. Theme version is bumped to 2.15.5.Mega Menu Hover Bridge Fix:
:not(.mega-menu)to the generic dropdown bridge selector (#menu .group.relative:has(> ul[role="menu"])::after) in section 3.3, preventing it from applying to the statically positioned mega item.#menu .my-menu-item.mega-menu > div::after, with the wrapper set toposition: relative,left/right: -1remto restore the li's horizontal padding, andheight: 2remto span the gap down to the panel.::beforebridge unchanged, since it only becomes interactive after the panel opens; regular dropdowns (About, Themes, Blog, Contact) are unaffected by either change.Verification:
Release Metadata and Documentation:
style.cssandreadme.txt.[2.15.5]entry toCHANGELOG.mddocumenting the root cause, both halves of the hover bridge, and the verification matrix.Note: the changelog entry references documentation updates to
docs/nynaeve/SERVICES-MEGA-MENU.md, but that file is not among the changed files in this branch — the doc change should either be included or the changelog line dropped.Files Changed:
CHANGELOG.md(Modified)readme.txt(Modified)resources/css/app.css(Modified)style.css(Modified)