我的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;
}
}
答案 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>