我的代码正在运行。但汉堡菜单不可见。这里 .menu-wrap .menu 这个选择器导致了问题。添加后这个汉堡包就不可见了。如何设计才能让我可以看到汉堡菜单并点击。有什么办法可以做到这一点吗？如果需要，我可以加载图像以供理解。
:root {
--primary-color: rgba(13, 124, 140, 0.75);
--overlay-color: rgba(24, 39, 51 , 0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
line-height: 1.4px;
}
nav{
margin: 0px;
padding: 10px 0;
}
header {
background-color: #333333;
position: fixed;
width: 100%;
z-index: 1;
}
.menu-top li {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 20px;
display: inline-block;
width: 100px;
}
/*menu style */
.menu-top li a{
color: #fff;
}
.menu-wrap{
position:fixed ;
top: 0;
right: 0;
z-index: 1;
}
.menu-wrap .toggler{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/*humburger line */
.menu-wrap .hamburger > div{
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/*humburger line for top and bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after{
position: absolute;
content: '';
top: -10px;
width: 100%;
height: 2px;
z-index: 1;
background: inherit;
}
.menu-wrap .hamburger >div::after{
top: 10px;
}
/* Toggler animation*/
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/*turn to x*/
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after
{
top:0;
transform: rotate(90deg);
}
/* rotate the hover when cheched */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/*rotate the hover when cheched */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.menu-wrap .menu{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
visibility:hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div{
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(1);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div{
text-align: center;
max-width: 90vw;
min-height: 100vh;
opacity: 1;
transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div>ul>li{
list-style: none;
color: #fff;
padding: 1.5rem;
font-size: 1.5rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
/* show menu*/
.menu-wrap .toggler:checked ~ .menu {
visibility:visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:cheched ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase{
background:var(--primary-color) ;
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
background: url('/portfolio/image/landscape.jpg') no-repeat center center/cover;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.showcase h1{
font-size: 4rem;
}
.showcase p{
font-size: 1.3rem;
}
.btn {
display: inline-block;
border: none;
background: #000;
color: #fff;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='./styles/style.css' rel='stylesheet' type='text/css'/>
<link rel ="preconnect" href="https://fonts.gstatic.com"/>
<abbr rel="stylesheet" type="text/css" href="./styles/bootstrap-grid.css">
<link rel="stylesheet" href="./styles/bootstrap.min.css">
</head>
<body>
<header>
<nav>
<section>
<div class="row">
<div class="col-sm-8">
<ul class="menu-top">
<li active><a href="#">HOME</a></li>
<li ><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="col-sm-4">
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Certificate</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Me</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</nav>
</header>
<section class="showcase">
<div class="container showcase-inner">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit
delectus quam molestiae explicabo cum facere ratione veritatis.</p>
<a href="#" class="btn">Read More</a>
</div>
</section>
</body>
</html>在你的CSS中，你设置汉堡菜单的样式：
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
您希望它与屏幕右上角对齐，因此只需将
left: 0;right: 0;我不太擅长编码，但是您不需要移动 .menu-wrap 中固定的单词吗？是不是空间放错地方了？
position:fixed ;
should be
position: fixed;