🎨 Palette: Fix sticky header overlap with scroll-padding-top#30
🎨 Palette: Fix sticky header overlap with scroll-padding-top#30remimixo wants to merge 1 commit into
Conversation
Added \`scroll-padding-top: 64px;\` to the \`html\` element in \`index.html\` to ensure that content is not obscured by the sticky navigation bar when navigating via anchor links. Co-authored-by: christopherfoxjr <213370400+christopherfoxjr@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Deploying cybr with
|
| Latest commit: |
a01a458
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6377b52a.cybr.pages.dev |
| Branch Preview URL: | https://palette-scroll-padding-fix-6.cybr.pages.dev |
Deploying foxos with
|
| Latest commit: |
a01a458
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a1257474.foxos.pages.dev |
| Branch Preview URL: | https://palette-scroll-padding-fix-6.foxos.pages.dev |
Deploying wolfos with
|
| Latest commit: |
a01a458
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4f705d63.wolfos.pages.dev |
| Branch Preview URL: | https://palette-scroll-padding-fix-6.wolfos.pages.dev |
1 participant
This PR addresses a common micro-UX issue where the 64px sticky navigation bar overlaps the top of sections when navigating via internal anchor links (e.g., clicking 'Features' or 'About').
💡 What: Added
scroll-padding-top: 64px;to the globalhtmlselector.🎯 Why: To ensure that section titles are clearly visible below the header after an anchor navigation, improving the clarity and flow of the user journey.
♿ Accessibility: Improves keyboard and screen reader navigation by ensuring the visual focus and destination content are not hidden behind UI chrome.
Verified with Playwright: The
#featuressection now scrolls to exactly 63.6px from the top (accounting for sub-pixel rendering), perfectly clearing the 64px header.PR created automatically by Jules for task 699991245421992182 started by @christopherfoxjr