打开菜单时汉堡图标向左移动

Question

我的 React 站点有一个响应式 header，它将在移动设备上的 header 的右侧显示一个汉堡菜单。 单击此汉堡包图标确实会在 header 下方显示一个菜单，但该图标会进一步移动到 header 之外的右侧。 当菜单打开时，它仍然被渲染，但在右边太远了，而不是停留在同一个地方。

我的反应文件如下：

返回 （

    <h1 className="Logo">Emence</h1>

    <CSSTransition
        in={!isSmallScreen || isNavVisible}
        timeout={350}
        classNames="NavAnimation"
        unmountOnExit
    >
        <nav>
            <div className="Nav">
                <a href="/">Home</a>
                <a href="/">Werken</a>
                <a href="/">Over ons</a>
                <a href="/">Contact</a>
            </div>
        </nav>
    </CSSTransition>

    <button onClick={toggleNav} className="Burger">
        <b style={{color: "white"}}>≡</b>
    </button>

</header>

);

还有（响应式）CSS：

.Header {
    z-index: 1;

    margin: 0;
    padding: 0;

    position: relative;
    top: 0; /* Stick it to the top */
    height: 80px;
    width: 100%;

    display: grid;
    grid-template-areas: "logo nav";
    background-color: #282c34;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: auto;

}

.Logo {
    height: 80px;
    max-width: 10vw;
    margin-left: 40px;

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: logo;
}

.Nav {
    display: grid;
    grid-area: nav;
    grid-template-columns: repeat(4, auto);
    align-items: center;
    justify-items: center;
    padding-top: 30px;
}

.Burger {
    display: none;
    grid-area: burger;
    margin: 0 20px 0 0;
    padding: 0;
    justify-self: end;
    font-size: 40px;
    border: none;
    background: none;
    outline: none;
    transition: 0.1s;
}

@media (max-width: 700px) {
    .Header {
        grid-template-areas: "logo burger" "nav nav";
    }

    .Nav {
        grid-template-rows: repeat(4, auto);
        grid-template-columns: none;
        grid-row-gap: 20px;

        width: 100vw;

        padding: 30px 0 30px;
        background: rgba(40, 44, 47, 0.95);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    }

    .Burger {
        display: inline;
    }
}

Answer 1

最简单的解决方法是从不在网格中的父元素中删除子 div (.nav)。 我只是从标记中删除了该 div 并将 the.nav class 添加到 nav 元素。

    <h1 className="Logo">Emence</h1>

    <CSSTransition
        in={!isSmallScreen || isNavVisible}
        timeout={350}
        classNames="NavAnimation"
        unmountOnExit
    >
        <nav class="Nav">
                <a href="/">Home</a>
                <a href="/">Werken</a>
                <a href="/">Over ons</a>
                <a href="/">Contact</a>
        </nav>
    </CSSTransition>

    <button onClick={toggleNav} className="Burger">
        <b style={{color: "white"}}>≡</b>
    </button>

</header>

https://codepen.io/richiegarcia/pen/WNQjKWa