Technical Documentation Page - vertical scrollbar on nav links only?

So I have most of the tests for this codepen already passing (just need to create a media query now), but one thing I was curious about was the vertical scrollbar that appears on the left-hand nav when you resize the window to the point where the links start overflowing. In the example codepen, this scrollbar only scrolls the links themselves and NOT the heading that says “JS Documentation”, which remains fixed in place.

When I looked this up online, I came across the “overflow:auto” property for block-level elements with a specified height. At first, I tried setting a height to the ul within my nav and giving it the overflow:auto property, but this did nothing as I resized the window. Next, I tried to put a div around the entire ul section of code and give it a height/overflow property as well, but this still didn’t seem to do anything.

The only thing that DID work, was when I put the overflow:auto property on my entire navbar selector, but this applies the scrollbar to everything including the header.

Here is the link to my codepen. Any hints as to how I can get this to work properly would be greatly appreciated. Thanks!

Some takeaways from your post

  1. The sample projects are just examples of one way the project can be completed. You should not try and replicate the project. Rather, come up with an idea of your own. The instructions say that your project should be “functionally similar” and “give it your own personal style”.
  2. overflow: auto; is shorthand…have you tried not using the shorthand and using one of the constituent properties instead?

Some other things I noticed;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Thanks for the response!

  1. Duly noted. I’ll keep this in mind starting with the next project and try to make it my own instead of emulating the examples.
  2. What do you mean by shorthand? I’ve also tried using “overflow-y” specifically, if that’s what you’re asking. Gave me the same results, unfortunately.

And thanks for the tip regarding the br tag. It makes sense to me from a readability standpoint to use margin/padding via CSS instead, but are there any instances where a br tag is actually the right thing to be using?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.