I should say that since my main career involves sound, I have been trying to fit my learning of web development into it. I’ve picked the idea of a documentation for a reverb. Of course, since the challenge involves using the code tags, I had to just fill these with random text, because it wouldn’t be worth it to study reverb algorithms just to pass the challenge!
I believe everything works as it should, but I couldn’t find a way to get a vertical scroll bar in the left nav menu, which means the content of the menu overflows when the screen’s height is too small to display it. Any ideas as to how I could do this?
Hello InTheMood!
I have seen your page and wanted to give you some feedback.
First of all and the most important thing, all tests are passing. The content of the page seems very interesting, even though it’s just a text to fill up. The design is also good, easy to read, navigate, and friendly to the eyes, as a documentation page should be.
Writing about the other thing you mentioned (vertical scrollbar in the left nav menu), it’s something simple to implement. You can use the property overflow-y with the value scroll. What this does is determine where to clip the content in the y axis that overflows the screen and what to do. In this case, as the scroll value is used, this property hides the overflow content but adds a scroll bar for you to use to see the whole content. More info in this article. This works well with a position: fixed. Here is an example of a code using this (not mine): http://jsfiddle.net/tvysB/2/.
@InTheMood The page looks nice. It is hard to make a technical documentation page good to look at. All tests pass, it is mobile responsive, good job. You look ready for the next project! Happy Coding!
Hi, your page looks nice.
In your media query if you add top:0; bottom:0; your scroll bar will be usable then. But I just experimented and saw it works Probably if there is no limit to top and bottom it doesn’t know the scrollbar limits.
You need to set the property and value position: fixed so it keeps without moving when you scroll the rest of the page. Below overflow-y: scroll and position: fixed you need to put top: 0; bottom: 0 (as ozukoc wrote). What this does is basically set the start and end of the navbar all along the page y-axis. Of course, if the screen is larger than the navbar content (like when you use the 2nd option of layout in Codepen) the scroll bar will not work because all content is showing. Otherwise, the scroll bar appears.
Also, I saw you have the ‘nav’ selector both outside and inside a media query. Make sure you edit both of them.
Probably if there is no limit to top and bottom it doesn’t know the scrollbar limits.