Hamburger Icon shifts left when opening menu

Question

My React site has a responsive header which will show a hamburger menu on the right of the header on a mobile device. Clicking this hamburger icon does show a menu beneath the header but the icon shifts further to the right outside of the header. It is still rendered but just too far on the right when the menu opens, instead of staying in the same place.

My React file is as follows:

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>

);

And the (responsive) 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

The easiest fix is to remove the child div (.nav) from the parent element which is not in the grid. I simply removed that div from the markup and added the.nav class to the nav element.

    <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