Hi @casierpe!
After looking at the CSS to achieve this, I’m not sure it’s practical with the way Dyad has been built.
The current header is positioned to scroll, while the featured content is fixe (it gets covered by the content as you scroll.
To make a fixed header work, we’d need to set something like this to make the featured content also scroll (otherwise there’s a gap when the header scrolls away)
.blog .site-header {
position: fixed;
z-index: 1;
opacity: .5;
}
.blog .site-banner {
top: 114px;
}
That looks good on some screen sizes, but on wider or narrower screens, the header changes height – which is fixable with a handful of media queries:
@media screen and ( min-width: 401px) {
.blog .site-banner {
top: 66px;
}
}
@media screen and ( min-width: 681px) {
.blog .site-banner {
top: 76px;
}
}
@media screen and ( min-width: 961px) {
.blog .site-banner {
top: 106px;
}
}
@media screen and ( min-width: 1328px) {
.blog .site-banner {
top: 90px;
}
}
But from there you have an issue with the Featured Content being cut off by the main content – and that’s a stickier issue. We’re now combining the heights of our solid header with the featured content area, which shifts as a percentage of the screen width – basically a moving target.
Feel free to play around with the above as a starting point, perhaps it will be helpful! Definitely know if you come up with a solution for the overlap problem 🙂
