Topics

Kevin Powell - Community•4mo ago

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 ?

CodePen

...

13 Replies

Mannix•4mo ago

you have two options first you set align-items: start; on the .container and

position: sticky;
top:0;

position: sticky;
top:0;

on both sidebars or

position:sticky;
top:0;
align-self: start;

position:sticky;
top:0;
align-self: start;

on both sidebars

Bismuth•4mo ago

I 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

MarkBoots•4mo ago

it is because you set the height of '#root' to a fixed 100%, make it a min-height

MarkBoots•4mo ago

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

CodePen

...

Bismuth•4mo ago

is there a way i can keep that scroll bar on right side instead of in middle content just like in facebook ?

MarkBoots•4mo ago

no, in that case you do need your approach

Bismuth•4mo ago

No description

Bismuth•4mo ago

which one position sticky ?

MarkBoots•4mo ago

nav is sticky, side bars are fixed indeed. or also possibly sticky but you need some calculations (js) to determine the top position

Bismuth•4mo ago

making fixed will not take the space and all content are scattered

MarkBoots•4mo ago

You can make them sticky but then you'll need some calculations (js) to determine the top position

Bismuth•4mo ago

https://codepen.io/web-test-the-sasster/pen/zYbXPPg , can you check this once

CodePen

...

MarkBoots•4mo ago

this you can do with a couple of js lines https://codepen.io/MarkBoots/pen/qBvwoVd?editors=1111

CodePen

...

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

how to match both the filter value to lower casehere how can i get the classList to lowerCase ``` function filterResults() { const fi grow image to size of siblingSee: https://svelte.dev/repl/a8f8ff1c7384448d96e36d4a9b30cfea?version=4.2.11 Is it possible to make How to Animate Slider Loop?How to Animate Slider Loop without touching the swiper buttons?Road mapHi everyone I'm interested in learning from and web development and I'm new in this development comm How do I store details of users in frontend when they sign in?I was wondering is it wise to store users details like name pictures and other general information i Why does click work but hover doesn't?Here's the code I'm having an issue with one.addEventListener('click', () => { if (one.hasAttribu What should I do next after CSS?So,I have completed HTML and CSS by doing projects for better understanding. Now,I want to know wh How to code this formSo I recently got back into coding and I don't how to go about coding this form. Can someone help ou Begginer in Design UI/UXHey guys, I have recently developed several front end projects with html css vanilla etc, would like Possible to turn an image into a prop in svelte?Messing around with Svelte and have setup a gallery using the same image but will css/svelte it diff