I have following CSS:
.show_dropdown {
max-height: 350px;
overflow-y: auto;
}
in a mobile view the dropdown list is less than 350px and this should hide scrollbar because it is not necessary. However, in bigger screen it works fine and hide scroll when it is not needed.
Thanks for reading and helping
Full code can be find here
The issue is padding: 1.25rem 0; in nav > .navbar_list > a if you inspect and check, if destop view padding-top and padding-bottom for each a tag is 43px whereas in mobile view it's 56px which increasing the overall height of the list and resulting the scrollbar visibility.
You can use vendor prefixes for this, and it's the approach I'd recommend.
.dropdown_list {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.dropdown_list::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
350px and hide it when it is less than 350px