How can I remove the scroll bar from the menu created with react-burger-menu? Despite trying various CSS properties adjustments, I have not been able to achieve the desired effect. Here is an image of the open menu and the corresponding CSS:
(https://i.stack.imgur.com/UyFBW.png)
/* Nav */
.bm-burger-button {
position: relative;
right: 10px;
padding: 0;
margin: 0;
width: 26px;
height: 20px;
margin-top: 0px;
padding-top: 0px;
justify-content: center;
align-items: center;
display: flex;
}
.bm-burger-bars {
background: #373a47;
}
.bm-burger-bars-hover {
background: #a90000;
}
.bm-cross-button {
height: 24px;
width: 24px;
}
.bm-cross {
background: #bdc3c7;
}
.bm-menu-wrap {
position: relative;
overflow: hidden;
margin-top: -30px;
padding-bottom: px;
}
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
position: relative;
overflow: hidden;
}
.bm-morph-shape {
fill: #373a47;
}
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
height: 200px;
}
.bm-item {
display: inline-block;
color: #d1d1d1;
margin-bottom: 10px;
text-align: left;
text-decoration: none;
transition: color 0.2s;
cursor: pointer;
}
.bm-item:hover {
color: #ffffff;
}
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
I attempted adjusting the heights of the menu and menu wrap properties to no avail. The menu was originally misaligned, prompting me to shift it upwards to cover part of the screen. While this solution worked for my current setup, the scroll bar issue persisted. Any guidance on resolving this matter would be greatly appreciated. The HTML structure currently places the menu nested within the header section of the application.