Sticky header overlaps content during scroll — needs background for readability #624
Description
Description
On the page https://kubernetes.dev/welcome/, when scrolling down, the sticky header becomes visible but has no background color. This causes the white text of the header to overlap with the underlying content, making it hard to read and visually confusing.
The issue is not present on initial load — only when scrolling.
Expected Behavior
When the header becomes sticky during scroll, it should have a solid or semi-transparent background (e.g., blue like the footer) to ensure contrast and readability.
Screenshots
Environment
- Browser: Chrome / Firefox / Safari
- OS: macOS / Windows / Linux
Suggested Fix
Add a background color (e.g., #1a75ff) to the header when it becomes sticky. Optionally add backdrop-filter: blur(10px) for a modern look.
Example CSS:
.header.scrolled {
background-color: #1a75ff;
backdrop-filter: blur(10px);
}