There are two classes that control the sidebar layout:
.w-sidebar {
width: 250px;
min-width: 250px;
max-width: 250px;
}
.row.collapse {
margin-left: -250px;
left: 0;
}
In order for the second class to function properly, the margin-left value must be the negative equivalent of the width set in the first class.
However, I wanted to make the width more flexible instead of using a fixed pixel amount:
.w-sidebar {
width: 35vw;
min-width: 250px;
max-width: 100vw;
}
.row.collapse {
margin-left: -250px;
left: 0;
}
Is there a way to dynamically adjust the margin-left property of .row-collapse so it matches the width of .w-sidebar, using only CSS?
I attempted to use a combination of min/max values within a calc() function, but this method is not supported.
I also tried utilizing media queries, but as a beginner, I could not grasp the concept well enough to implement it.
You can view my trial here:
To see a fully functional demo, check out the original code here: