Значок гамбургера сдвигается влево при открытии меню - PullRequest
Новая
       15

Значок гамбургера сдвигается влево при открытии меню

0 голосов
/ 27 апреля 2020

Мой сайт React имеет отзывчивый заголовок, который будет отображать меню гамбургера справа от заголовка на мобильном устройстве. Нажав на этот значок гамбургера , вы увидите меню под заголовком, но значок сместится дальше вправо за пределы заголовка. Он по-прежнему отображается, но слишком далеко справа при открытии меню, вместо того, чтобы оставаться в том же месте.

Мой файл React выглядит следующим образом:

return (

    <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 Ответ

1 голос
/ 27 апреля 2020

Самое простое решение - удалить дочерний элемент 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

...