如何让使用react-burger-menu创建的菜单不带有滚动条?

问题描述 投票:0回答:1

如何让使用react-burger-menu创建的菜单不带有滚动条?我尝试过在 css 中全面添加和更改不同的属性,但大多数都没有任何实际效果。这是打开菜单和我的 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);
}

我尝试更改菜单和菜单环绕属性的高度。菜单最初也是偏移的,我最终不得不将其向上移动以覆盖屏幕的上部。我确信有更好的方法可以做到这一点,但它适合我正在做的事情。滚动条在我这样做之前和之后都在那里,所以这并没有导致它出现。任何帮助将非常感激。就 html 而言,它目前嵌套在应用程序的标头部分中。

css reactjs next.js menu hamburger-menu
1个回答
0
投票

我通过将 .bm-item-list 中的 max-height 设置为 95% 解决了这个问题。不明白这是如何解决的,所以如果有人可以解释的话将非常受欢迎。

© www.soinside.com 2019 - 2024. All rights reserved.