打開菜單時漢堡圖標向左移動

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