Vertically stacked sticky headers
I am trying to replicate Twitter's layout.
I have a header menu bar, a side navbar that translates from the left when you click the header menu bar, and a set of tabs [For You, Following].
I want to sticky position all of the above elements to the top such that, as the user scrolls down the page, the elements will remain in their same position.
The problem I have is balancing between keeping the side navbar's height set to 100% of the screen, making sure the side navbar is always on top of the set of tabs [For You, Following], making sure that neither of the components takes up any content space, and avoiding fixed unit values.
Might anyone have any ideas on how to achieve this? I've attached some screenshots for when the sidebar is not opened, and when the sidebar is opened.
I have a header menu bar, a side navbar that translates from the left when you click the header menu bar, and a set of tabs [For You, Following].
I want to sticky position all of the above elements to the top such that, as the user scrolls down the page, the elements will remain in their same position.
The problem I have is balancing between keeping the side navbar's height set to 100% of the screen, making sure the side navbar is always on top of the set of tabs [For You, Following], making sure that neither of the components takes up any content space, and avoiding fixed unit values.
Might anyone have any ideas on how to achieve this? I've attached some screenshots for when the sidebar is not opened, and when the sidebar is opened.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
