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

时间:2020-04-26 21:19:33

标签: html css reactjs responsive

我的React网站有一个响应标题,该标题将在移动设备标题的右侧显示一个汉堡菜单。 单击此汉堡包图标确实会在标题下方显示一个菜单,但该图标会移至标题外部的右侧。仍然会渲染它,但是菜单打开时它就在右边,而不是停留在同一位置。

我的React文件如下:

返回(

    <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;
    }
}

1 个答案:

答案 0 :(得分:1)

最简单的解决方法是从不在网格中的父元素中删除子div(.nav)。我只是从标记中删除了该div,然后将.nav类添加到了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