this seems like such an easy solution but for some reason, I'm not able to get it to work. I must be overlooking something. Anyways, applying an overflow: auto or overflow: scroll to my menu class seems to not add in a scroll option. I've only tried overflow: auto and overflow: scroll as well as overflow-y: scroll and overflow-y: auto. I've also applied it to other classes within this menu just incase I was absolutely putting the overflow in the wrong area but no luck. From what I've googled and found on W3Schools was adding an overflow: scroll or overflow: auto will do the trick. But I must have something else affecting it.
.category {
list-style-type: none;
margin-left: -40px;
}
#menuToggle {
display: block;
position: absolute;
top: 12px;
right: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menu a {
color: #212529;
text-decoration: none;
}
#menu a:hover {
color: orange;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
overflow-y: scroll;
position: absolute;
width: 300px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
right: -100px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
opacity: 1;
}
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<ul >
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>PowerBI Dashboard</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
<ul>
<h3>header</h3>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</ul>
</ul>
</div>
CodePudding user response：
@insaneBugs had the fix, I just decreased padding but I really just needed to add height to the menu. Then I added overflow: scroll.
CodePudding user response：
For that just try adding 20 times br tags in at the end in the html file (before closing body tag.) <br>.
Now check wheter scroll bar is there or not. If it is there than just remove the br tags and add whatever content you want. Than automatticaly scroll bar will come!