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
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:
I will link them later. And how do u put the lines above each element?
Just add this, it works and i removed the padding from .menu-items to make it fill the width
When i apply the:
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,
Therefore, you can apply the padding to the
<a> tag and give the border-bottom to the
I have made some changes in my design. How do you think about it now?