我的汉堡包菜单不可见。请帮我设计这个

Question

我的代码可以正常工作了。但汉堡菜单不可见。这里 .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>

Answer 1

在您的 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;。

我的汉堡包菜单不可见。请帮我设计这个

My Hamburger menu is not visible. Please help me to design this

html

css

hamburger-menu