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!
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”.
overflow: auto; is shorthand…have you tried not using the shorthand and using one of the constituent properties instead?
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.
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?