htmlcssresponsive-design

designing a responsive mobile menu with grid layout


I try to build a responsive mobile menu. My problem is, that I can open the menu, by clicking on the hamburger icon, but the close icon is not doing its job. I think there might be a conflict between the style of the grid areas and the span tag but I can not see it.

/* import Google Fonts Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', 'san-serifs'}
 
body{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height : 70vh;

    
}

.container{
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  background-color: aliceblue;
  grid-template-areas: "header header header header header header header header header"
                        "main main main main main main main main main"
                        "footer footer footer footer footer footer footer footer footer";

}

.container .header {
  display: grid;
  grid-area: header;
 
    font-size: 1.45rem;
    font-weight: 500;
  background-color: black;
  position: sticky;
  top: 0%;


}
.container .main{
grid-area: main;
background-color: red;
}
.container .footer {
  grid-area: footer;
  background-color: gold;
}

.container .header .nav .menu{
  list-style: none;
  display: grid;
}
.menu .home{
  grid-column: 1/2;
  
}

.menu .events{

grid-column: 2/3;

}
.menu .langos{
  
grid-column: 3/4;

}

.menu .uns {
  grid-column: 5/6;
}
.menu .news{
  grid-column: 6/7;
}
.menu .kontakt{
  grid-column: 7/8;
}
     /* Nav menu */
     .side-menu {
      display: none;
    } 

nav li a{
  text-decoration:none;
  color: yellow;
 
}
nav li a:hover{
  color: aliceblue;
  transition: 0.7s;
}



@media (max-width: 767px) {

        .container {
        background-color:aliceblue;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas: 
        
        "header header header"
        "header header header"
        "header header header"
        
        "main main main"
        "main main main"
        "main main main"
        
        "footer footer footer"
        "footer footer footer "
        "footer footer footer"
        
        }
        .container .header{
          display: grid;
          grid-area:auto;
        }

        .menu  .home{
          grid-column: 2/3;
          grid-row: 1/2;
        }
        .menu  .events{ 
        grid-column: 3/4;
        grid-row: 1/2;
        }
        .menu  .langos{
        grid-column: 2/3;
        grid-row: 2/3;
        }
        .menu  .uns {
          grid-column: 3/4;
          grid-row: 2/3;
        }
        .menu  .news{
          grid-column: 2/3;
          grid-row: 3/4;
        }
        .menu  .kontakt{
          grid-column: 3/4;
          grid-row: 3/4;
        }
        .menu  .logo{
          display: none;
        }*/

        /* Nav menu */
        .side-menu {
          display: none;
        } 
      .nav{
        width: 100%;
        height: 100%;
        position: fixed;
      
        overflow: hidden;

      }
        .nav{
          max-height: 0;
          transition: max-height .5s ease-out;
        }
      /* Menu Icon */
      .hamb{
        cursor: pointer;
       
        
      }
      /* Style label tag */

      .hamb-line {
        background: white;
        display: block;
        height: 2px;
        position: relative;
        width: 24px; 
        

      }
      /* Style span tag */

      .hamb-line::before,
      .hamb-line::after{
          background: white;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          transition: all .2s ease-out;
          width: 100%;
      }
      .hamb-line::before{
          top: 5px;
      }
      .hamb-line::after{
          top: -5px;
      }

      /* Toggle menu icon */
      .side-menu:checked ~ nav{
        max-height: 100%;
      }
      .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
      }
      .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top:0;
      }
      .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top:0;
      }

      body:has(.side-menu:checked) {
      overflow: hidden;
      }
  }


  @media (min-width: 768px) and (max-width: 1023px) {

    .container {
    background-color:blueviolet;
    
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas: 
    
    "header header header"
    "header header header"
    "header header header"
    
    "main main main"
    "main main main"
    "main main main"
    
    "footer footer footer"
     "footer footer footer"
      "footer footer footer"
    
    }
}
<!DOCTYPE html>
<html lang = "en"  dir = "ltr">
    
<head>
  <meta charset ="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content-type="text/html">
  <!--meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0"-->
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/Screenshot 2024-12-04 164538.png">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
  <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"/>

  <title>Index</title>
  <link rel = "stylesheet" href="style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <link rel="stylesheet" href ="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script src="jquery-3.7.1.js"></script>  
<!--script type= "module" src="script.js" async></script-->
  </head>

  <body>

    <div class="container">
      
        <header class="header">
          <!--Hamburger Icon-->
          <input class="side-menu" title="hamb" type="checkbox" id="side-menu"/>
          <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
          <!--Menu-->
          <nav class="nav">
            <ul class="menu">
             <li class="home"> <a  href="index.html">Home</a></li>
              <li class="events"><a  href="events.html">Events</a></li>
              <!--li class="langos"><a  href="langos.html">Langos</a></li-->
             
              <li class="uns"><a href="uns.html">Über uns</a></li>
              <li class="news" ><a  href="news.html">News</a></li>
              <li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </nav>
        </header>
        <!-- Main content -->
        <main class="main">Main area</main>
        <footer class="footer">Footer</footer>
      
      
        
    </div>

  </body>

you can see the disaster in the code snippet, when you minimize the window. I hope you can help me.


Solution

  • This is because when you click on the menu icon on a mobile screen, the navigation menu opens, but it is placed over the close icon, so you cannot close the navigation menu by clicking the close icon again. To fix this, you can set a z-index on the menu icon to keep it on top of other elements.

    .hamb{
        cursor: pointer;
        z-index: 1000; /* Set z-index to keep the icon at the top position */
    }
    

    /* import Google Fonts Poppins*/
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    
    
    *{margin: 0;
      padding:0;
      box-sizing: border-box;
      font-family: 'Poppins', 'san-serifs'}
     
    body{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height : 70vh;
    
        
    }
    
    .container{
      display: grid;
      width: 100%;
      height: 250px;
      grid-template-columns: repeat(9, 1fr);
      grid-auto-rows: minmax(100px, auto);
      background-color: aliceblue;
      grid-template-areas: "header header header header header header header header header"
                            "main main main main main main main main main"
                            "footer footer footer footer footer footer footer footer footer";
    
    }
    
    .container .header {
      display: grid;
      grid-area: header;
     
        font-size: 1.45rem;
        font-weight: 500;
      background-color: black;
      position: sticky;
      top: 0%;
    
    
    }
    .container .main{
    grid-area: main;
    background-color: red;
    }
    .container .footer {
      grid-area: footer;
      background-color: gold;
    }
    
    .container .header .nav .menu{
      list-style: none;
      display: grid;
    }
    .menu .home{
      grid-column: 1/2;
      
    }
    
    .menu .events{
    
    grid-column: 2/3;
    
    }
    .menu .langos{
      
    grid-column: 3/4;
    
    }
    
    .menu .uns {
      grid-column: 5/6;
    }
    .menu .news{
      grid-column: 6/7;
    }
    .menu .kontakt{
      grid-column: 7/8;
    }
         /* Nav menu */
         .side-menu {
          display: none;
        } 
    
    nav li a{
      text-decoration:none;
      color: yellow;
     
    }
    nav li a:hover{
      color: aliceblue;
      transition: 0.7s;
    }
    
    
    
    @media (max-width: 767px) {
    
            .container {
            background-color:aliceblue;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(100px, auto);
            grid-template-areas: 
            
            "header header header"
            "header header header"
            "header header header"
            
            "main main main"
            "main main main"
            "main main main"
            
            "footer footer footer"
            "footer footer footer "
            "footer footer footer"
            
            }
            .container .header{
              display: grid;
              grid-area:auto;
            }
    
            .menu  .home{
              grid-column: 2/3;
              grid-row: 1/2;
            }
            .menu  .events{ 
            grid-column: 3/4;
            grid-row: 1/2;
            }
            .menu  .langos{
            grid-column: 2/3;
            grid-row: 2/3;
            }
            .menu  .uns {
              grid-column: 3/4;
              grid-row: 2/3;
            }
            .menu  .news{
              grid-column: 2/3;
              grid-row: 3/4;
            }
            .menu  .kontakt{
              grid-column: 3/4;
              grid-row: 3/4;
            }
            .menu  .logo{
              display: none;
            }*/
    
            /* Nav menu */
            .side-menu {
              display: none;
            } 
          .nav{
            width: 100%;
            height: 100%;
            position: fixed;
          
            overflow: hidden;
    
          }
            .nav{
              max-height: 0;
              transition: max-height .5s ease-out;
            }
          /* Menu Icon */
          .hamb{
            cursor: pointer;
            z-index: 1000; /* Set z-index to keep the icon at the top position */
            
          }
          /* Style label tag */
    
          .hamb-line {
            background: white;
            display: block;
            height: 2px;
            position: relative;
            width: 24px; 
            
    
          }
          /* Style span tag */
    
          .hamb-line::before,
          .hamb-line::after{
              background: white;
              content: '';
              display: block;
              height: 100%;
              position: absolute;
              transition: all .2s ease-out;
              width: 100%;
          }
          .hamb-line::before{
              top: 5px;
          }
          .hamb-line::after{
              top: -5px;
          }
    
          /* Toggle menu icon */
          .side-menu:checked ~ nav{
            max-height: 100%;
          }
          .side-menu:checked ~ .hamb .hamb-line {
            background: transparent;
          }
          .side-menu:checked ~ .hamb .hamb-line::before {
            transform: rotate(-45deg);
            top:0;
          }
          .side-menu:checked ~ .hamb .hamb-line::after {
            transform: rotate(45deg);
            top:0;
          }
    
          body:has(.side-menu:checked) {
          overflow: hidden;
          }
      }
    
    
      @media (min-width: 768px) and (max-width: 1023px) {
    
        .container {
        background-color:blueviolet;
        
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-template-areas: 
        
        "header header header"
        "header header header"
        "header header header"
        
        "main main main"
        "main main main"
        "main main main"
        
        "footer footer footer"
         "footer footer footer"
          "footer footer footer"
        
        }
    }
    <!DOCTYPE html>
    <html lang = "en"  dir = "ltr">
        
    <head>
      <meta charset ="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta content-type="text/html">
      <!--meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0"-->
      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Expires" content="0">
      <link rel="icon" type="image/png" sizes="32x32" href="./images/Screenshot 2024-12-04 164538.png">
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
      <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css"/>
    
      <title>Index</title>
      <link rel = "stylesheet" href="style.css"> 
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      
      <link rel="stylesheet" href ="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <script src="jquery-3.7.1.js"></script>  
    <!--script type= "module" src="script.js" async></script-->
      </head>
    
      <body>
    
        <div class="container">
          
            <header class="header">
              <!--Hamburger Icon-->
              <input class="side-menu" title="hamb" type="checkbox" id="side-menu"/>
              <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
              <!--Menu-->
              <nav class="nav">
                <ul class="menu">
                 <li class="home"> <a  href="index.html">Home</a></li>
                  <li class="events"><a  href="events.html">Events</a></li>
                  <!--li class="langos"><a  href="langos.html">Langos</a></li-->
                 
                  <li class="uns"><a href="uns.html">Über uns</a></li>
                  <li class="news" ><a  href="news.html">News</a></li>
                  <li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
                </ul>
              </nav>
            </header>
            <!-- Main content -->
            <main class="main">Main area</main>
            <footer class="footer">Footer</footer>
          
          
            
        </div>
    
      </body>