Hi
I am doing the :Technical Documentation Page" assignment. I have created a Grid for the left navigation menu. How do i add a scroll bar to it. Using
overflow: scroll;
creates a scroll bar for the whole page.
I also want to insert the horizontal lines under each menu item. I tried:
border-bottom: 2px solid black;
but it didn’t work. Kindly help. Here’s my page:
https://codepen.io/umairhp/full/XBqLdM/
You have to apply
position: fixedto your.menuclass and set thetop,bottomproperties to 0 and applyoverflow: scroll
You have navigation bar as you mentioned in the left side, but there are no links in those, you have only span elements
I will link them later. And how do u put the lines above each element?
When i apply the:
position: fixed;
in the .menu class it breaks the design of the container.
It’s not necessary that I use overflow: scroll, I can also use overflow-y: auto;
But for that I have to give a fixed height to the menu.
Only with position: fixed, it won’t be good, you have to adjust it with top and bottom to 0
I did that but it was breaking the dimensions of the container.
I modified the code a bit. I think it looks good now. Can you check?
Also I want border-bottom along the grid lines. Not the span items because I don’t want to remove the padding.
be aware that <span> tags are inline tags not block tags.
Yes, i see the problem there, because you did not contain any elements inside your container and also you made the .menu to be fixed, therefore, the height of the container becomes null, if you set the height as 100vh you will regain the shape
You can make the .container as position: relative and give .menu as position: absolute, hence the navbar stays inside the .container
If you need border-bottom like that, then you must follow this type,
<ul>
<li><a>Link</a></li>
<li><a>Link</a></li>
</ul>
Therefore, you can apply the padding to the <a> tag and give the border-bottom to the <li> tags
I have made some changes in my design. How do you think about it now?