I have this menu that when the height is more than 800px you can scroll, but when is less than 800px you can't scroll but the sidebar appears. I would like to know how to hide it while the height is less than
.menu{
height:
max-height:800px;
overflow:scroll;
overflow-x: hidden;
}
You need to use auto:
overflow:auto;
This means that the scrollbar is visible only when necessary.
Try This:
.menu {
box-sizing:border-box;
overflow:auto;
//other code...
}
Set overflow-x property to auto, or remove the property altogether if it is not inherited.
overflow: scroll always show scrollbar in your html.
You can use overflow: auto instead of scroll
.menu{
height: auto;
max-height: 800px;
overflow: auto;
overflow-x: hidden;
}
The overflow attributes can take different values, that let you decide how to deal with content that extends beyond the boundary of the container.
In this case what you need to use is overflow: auto;.
See this link for reference. https://www.w3schools.com/cssref/pr_pos_overflow.asp
And this is a link where you can try out different styles : Demo
try this code
.menu {
height: max-height:800px;
overflow: auto;
overflow-x: hidden;
}
.menu ul li {
list-style-type: none;
}<div class="menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>Add the height in "vh", in your case make it around 95vh, then overflow-y:hidden;
