Fixed Scrollable Sidebar

Fixed Scrollable Sidebar
0

#1

Hi, I am building Technical documentation page. I am having trouble in creating sidebar.
I know to make a div scrollable you have to use overflow property. The problems are
1- How to fixed it to sidebar. I am using css grid.
2- Which property to use to make it scrollable when it exceed defined height which I want to be 100vh.

Using position: fixed fixed the sidebar but it did not remain a grid column.
Here is the codepen link.


#2

Did you try overflow-y: auto; on #navbar instead of the ul selector?


#3

Yes it I tried it before and at least scrollbar was there (without scroll). But now it don’t appeared.
I put it on the ul because I want header to remain out of scroll.


#4

Since your content is not that long enough the scroll doesn’t appear. Try giving the font-size of li as
font-size: 2rem and apply the fixed, height and overflow-y props to the ul

If you are not concerned about passing the test then you can carry on with this.

If you want to pass this test, then you should add the test suite link to your code and apply what the challenge says, and after that you can style your own way as you need ( You are not restricted to do this )

Test suite,

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

#5

HI thanks it worked .
Sidebar is fixed now and also scrolling.
Thanks man.