I’m working on what seems like a basic web layout: a static page header (stays in place when scrolling), static side menu (also stays in place) and the main column of content scrolls.
There’s a Codepen below that is “in progress” and shows it working. Bear in mind it’s not responsible yet – you need a screen >1024px wide. I’ll keep working on it to create a responsive option, so check back soon.
Something I want to point out is CSS frameworks can help with this situation. And they can hinder. I’ve taken to using the Bulma utility CSS framework lately and it’s great. But using its built in container/grid system I think (TBC) seems to be working against me. I also find myself needing to override the resets to un-reset certain typography decisions.
Sometimes it’s better to just do it yourself.
View the source code at https://codepen.io/jsnelders/pen/WNQrRbo.
See the Pen
Static Header, Static Sidebar, Scrolling Content by Jason (@jsnelders)
on CodePen.