The AI Prompt Library for HR

That's a z-index conflict with the theme, not a bug in the styling itself. Here's exactly what's happening: When you hover the nav megamenu, the theme dims the whole page with a navy overlay — from its CSS: body.hovering .body-container-wrapper:before { background:#102A51; opacity:.5; z-index:5; } That overlay sits at z-index 5. My sticky category bar was set to z-index 100 (carried over from the source, to float above the cards). Since 100 > 5, the tab bar pokes above the dimming overlay — so everything else darkens but the tab bar stays bright, making it look "highlighted." Fix: drop the tab bar's z-index below the overlay (but still above the cards) so it dims along with the rest of the page when the megamenu is open. z-index 4 does it: above the cards (which are auto/0), below the theme overlay (5) and the header (999). ⏺ Update(modules-decomposed/PP Prompt Deck.module/module.html) ⎿ Added 3 lines, removed 1 line 109 .ppd .ppd-pill img{ display:block; max-width:100%; max-height:22px; width:auto; height:22px; } 110 111 /* ---- FILTER TABS ---- */ 112 - .ppd .ppd-filterbar{ position:sticky; top:400px; z-index:100; background:#fff; border-bo -ttom:1px solid var(--slate-200); } 112 + /* z-index 4: above the cards, but BELOW the theme's nav-hover dim overlay (z-index 5) so the 113 + bar dims with the page when the megamenu is open instead of staying "highlighted". */ 114 + .ppd .ppd-filterbar{ position:sticky; top:400px; z-index:4; background:#fff; border-bott +om:1px solid var(--slate-200); } 115 .ppd .ppd-tabs{ max-width:1200px; margin:0 auto; display:flex; align-items:flex-end; justify-content:center; padding:20px 48px 0; } 116 .ppd .ppd-tab{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 28px 16px; border-bottom:3px solid tran sparent; cursor:pointer; opacity:.4; transition:opacity .25s,border-color .25s; flex:1; max-width:160px; } 117 .ppd .ppd-tab.active{ opacity:1; border-color:var(--oxford); } ⏺ Bash(cd "/Users/admin/Documents/Prompt Pack" && hs cms upload "modules-decomposed/PP Prompt Deck.module" "pp/PP Prompt Deck.module" 2>&1 | grep -E 'SUCCESS|ERROR|mod…) ⎿ Uploaded file "/Users/admin/Documents/Prompt Pack/modules-decomposed/PP Prompt Deck.module/module.html" to "pp/PP Prompt Deck.module/module.h tml" ✔ SUCCESS Uploading files to "pp/PP Prompt Deck.module" in the Design Manager is complete ⏺ Fixed and uploaded to pp/PP Prompt Deck. Recap: the theme dims the page with a navy overlay at z-index: 5 whenever the nav megamenu is open. The sticky tab bar was at z-index: 100, so it floated above that overlay and stayed bright — looking highlighted. I lowered the tab bar to z-index: 4 — still above the cards (so sticky scrolling works), but below the overlay, so now it dims along with the rest of the page when you browse the nav. Reload and hover the Solutions (or any) megamenu — the category bar should now darken with everything else, no more highlight. Two things to keep in mind for the future (same root cause): - The _page-scroll-background.js and any other pp/ modules you place on the page don't have this issue (no high z-index), but if you ever add a module with a sticky/elevated element, keep its z-index under 5 to play nicely with the theme's megamenu dim. - The deck's own expand-overlay (when you click a card) is intentionally z-index: 500 — that's correct; it should sit above everything, including the nav.