Linked Questions

Popular Questions

How do I get the menu created using react-burger-menu to not have a scrollbar? I've tried adding and changing different properties all across the board in the css, and most of them don't have any real kind of effect. Here is an image of the open menu and my 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 tried changing the heights of the menu and menu wrap properties. The menu was offset originally too, and I ended up having to shift it up to cover the upper portion of the screen. I'm sure there was a better way to do that, but it works for what I'm doing. The scroll bar was there before and after I did that, so that didn't cause it to appear. Any help would be very much appreciated. As far as html is concerned, it's nested in the header portion of the app currently.

Related Questions