How to make this layout ?
https://codepen.io/web-test-the-sasster/pen/zYbXPPg
bascially i want to fix right/left sidebar fix and nav to be sticky and main content to scroll. How can i acheive such layout ?
13 Replies
you have two options
first
you set
align-items: start; on the .container and
on both sidebars
or
on both sidebarsI want navbar to be sticky but not sidebar
sidebar will be there as it is
and main content to be scrollable
i made a few changes here but i don't know why navbar is not sticking here when i reach to post 18
it is because you set the height of '#root' to a fixed 100%, make it a min-height
you can also use grid to setup the layout over the total height of the screen and give main an overflow: auto so it is able to scroll.
that way you don't need a sticky at all
https://codepen.io/MarkBoots/pen/PoLgQrG
is there a way i can keep that scroll bar on right side instead of in middle content just like in facebook ?
no, in that case you do need your approach
which one position sticky ?
nav is sticky, side bars are fixed indeed. or also possibly sticky but you need some calculations (js) to determine the top position
making fixed will not take the space and all content are scattered
You can make them sticky but then you'll need some calculations (js) to determine the top position
https://codepen.io/web-test-the-sasster/pen/zYbXPPg , can you check this once
this you can do with a couple of js lines
https://codepen.io/MarkBoots/pen/qBvwoVd?editors=1111