Question on the scroll bar in technical documentation project

HTML-CSS
1

How do you have a separate scroll bar for the navigation bar and a separate scroll bar for the main page? You’ll see what I mean in the page down below.

https://codepen.io/freeCodeCamp/full/NdrKKL

I know it’s not technically a requirement, but I’m still curious.

EDIT:

I’ll link to my page as well. If you look at the first page, when you scroll on the main page, the navigation bar stays fixed.

https://codepen.io/Codemeena/pen/axJEGq

2

You already have one in mobile view. Hover your mouse over nav and try scrolling.

3

Are you asking how it is done?

In the case of the page, you linked to it is done by giving the nav/ul a fixed height and then giving the ul overflow-y: auto; then you will get scroll bars showing up (to handle the overflow). The other scroll bar on the main page part is added automatically when the content of the page is more/taller than the window height.

Example of text overflow and using overflow: auto

<div class="container">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum ex recusandae ipsam deserunt eos libero expedita possimus odit aliquid in numquam aut modi consectetur aspernatur, quas, dicta, beatae porro aliquam omnis! Totam eligendi esse dolor dolore nostrum accusantium odit voluptate placeat culpa? Necessitatibus voluptatibus deserunt quaerat consequatur a! Totam non quod facilis porro. Laboriosam distinctio voluptates qui fuga voluptatibus labore in veritatis vero eveniet porro doloremque, aliquid hic placeat, numquam vel provident saepe modi libero minima, aut ex ipsum dolores.</p>
</div>

body {
  height: 1800px;
}

p {
  font-size: 28px;
}

.container {
  max-height: 200px;
  background: #8bc34a;
  overflow-y: auto;
}
4

@lasjorg Hey. Thanks for replying. Could you check out the edit I made above, because I didn’t exactly get my question across properly?

5

In your #navbar id. Try changing the position to fixed, because you’re wanting your content to stay in the same spot. There are many different position values you can choose from, but this one may be your best bet.