Kevin Powell - Community•3mo ago

Help for Create layout

I'm trying to create a layout where I have a sidebar that meets the following requirements: 1- The sidebar should be fixed in position, remaining visible while scrolling. 2- When the sidebar is expanded, it should automatically push the main content to the right. Conversely, when collapsed, the content should shift back to its original position. 3- I want to avoid using flex because, with flex, the sidebar's height is tied to the content's height, which is not what I want. 4- I also don't want the content to be underneath the sidebar when it’s expanded. Instead, the content should dynamically adjust its position based on the sidebar's width. 5- Lastly, I want this to be dynamic, meaning there should be no reserved space for the sidebar when it’s collapsed. What’s the best way to achieve this in CSS?

6 Replies

Chris Bolson•3mo ago

I did a demo for something similar a while ago. It may be of some use. https://codepen.io/cbolson/pen/LYXGZJM

Chris Bolson

CodePen

Side col fixed postion full height

...

MohammadReza_Salemi•3mo ago

Hi Chris, I really appreciate your help earlier—it worked perfectly! 🙌 But I’ve got another thing I’m trying to figure out. I want to stick a menu item at the bottom of my sidebar and also place the "expand sidebar" icon at the bottom right on the sidebar’s border. Ideally, these would both stay fixed in position. Any idea how I can do that? I’d really appreciate your help! Thanks again!

MohammadReza_Salemi•3mo ago

I figured out the issue—it was caused by my sticky header. I had the header on top of both the sidebar and the main content. Moving it above just the content fixed everything. Initially, I had to add top: 80px to the sidebar to position it below the sticky header, but that caused the sidebar to go under the header when I reached the end of the page. Now, with top: 0 and the header only above the content, everything works perfectly. If you have any ideas on how to keep the sticky header on top of both the sidebar and content, without the sidebar going below the header when scrolling, I’d appreciate it! Thanks!

Chris Bolson•3mo ago

If the header height has a fixed value (eg 80px) you can calculate the height of the side bar to take this into account and also offset the top position by the same amount.

height: calc(100svh - 80px);
top: 80px;

height: calc(100svh - 80px);
top: 80px;

(a custom property would make this easier to adjust)

:root{
  --height-header: 80px;
}
header{
  ...
  height: var(--height-header);
}
nav{
  ...
  height: var(--height-header);
  position: sticky;
  top: var(--height-header);
}

:root{
  --height-header: 80px;
}
header{
  ...
  height: var(--height-header);
}
nav{
  ...
  height: var(--height-header);
  position: sticky;
  top: var(--height-header);
}

MohammadReza_Salemi•3mo ago

Your solution worked perfectly—thanks a lot! 🙌 Hi Chris, I hope you're doing well! I wanted to follow up on the sidebar issue we discussed yesterday. Is it possible to send you a sandbox link with a demo of my layout to get some help with a tooltip issue related to that? I’m using Tailwind and ShadCN. Thanks in advance for your time!

Chris Bolson•3mo ago

If you paste your link here I can take a look

Gaming

Programming

Help for Create layout