title: Enabling interaction with lower stacked elements(SASS/CSS). no JS
body: <p>I have created a hamburger menu that covers the whole page when checked. On my page I have some links and hover effects that i would like the user to interact with. The problem is that when I set a z-index to the hamburger menu so that it appears stacked over the page's content, the page's content become uninteracltable, such that you cant even click on the links and what not. This happens even before the hamburger menu is checked and is still invisible. Is there a way to solve this so that the user can interact with the contents of the page and still maintain a higher stacking order on the hamburger menu? I hope I have explained myself well. thanks.</p>
  
  <p>My SASS code is too long but let me post it just in case</p>
  
  <pre><code>@import './variables';
  @import './mixin';
  
  html, body{
  height: 100%;
  width: 100%;
  margin: 0;
  }
  
  /*layout.html*/
  .header{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  
  .checkbox{
      position:fixed;
      box-sizing: border-box;
      top: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      z-index: 1;
  
      .navigation{
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          visibility: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
  
          &gt;div{
              background-color: rgba(0, 0, 0, 0.8);
              border-radius: 50%;
              transform: scale(0);
              width: 200vw;
              height: 200vh;
              @include flexmix(column);
              flex:none;
              transition: all 0.4s ease-in-out;
  
              &gt;div{
                  opacity: 0;
                  @include flexmix(column);
                  transition: all 0.4s ease;
                  ul{
                      li{
                          list-style: none;
                          @include flexmix(column);
  
                          a{
                              text-decoration: none;
                              color: $deepwhite;
                              padding: 10px;
                          }
                      }
                  }
              }
          }
      }
  
      .toggler{
          position: absolute;
          z-index: 2;
          width: 50px;
          height: 50px;
          margin: 0;
          padding: 0;
          top: 0;
          left: 0;
          opacity: 0;
  
          &amp;:checked{
              +.btn {
                  &gt;div{
                      transform: rotate(135deg);
                      &amp;::before, &amp;::after{
                          transform: rotate(90deg);
                      }
                  }
              }
              ~.navigation {
                  visibility: visible;
                  transition: all 0.1s ease 0.1s;
                  &gt;div{
                      transform: scale(1);
                      transition-duration: 0.4s;
                      &gt;div{
                          opacity: 1;
                          transition: ease 0.3s ease 0.3s;
                      }
                  }
              }
              &amp;:hover{
                  +.btn{
                      &gt;div{
                          transform: rotate(225deg);
                          top: 0;
                      }
                  }
              }
          }
      }
      .btn{ 
          @include flexmix(column);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 50px;
          height: 50px;
          div{
              width: 70%;
              height: 4px;
              background: $deepyellow;
              z-index: 1;
              border-radius: 5px;
              transition: all 0.3s ease-in-out 0.3s;
              position: relative;
              &amp;::before,
              &amp;::after{
                  content: '';
                  position: absolute;
                  width: 100%;
                  height: 4px;
                  background: inherit;
                  z-index: 1;
                  border-radius: 5px;
                  transition: all 0.3s ease-in-out 0.3s;
                  z-index: 1;
              }
              &amp;::before{
                  top: -16px;
              } 
              &amp;::after{
                  top: 16px;
              }
          }        
      }
  }
  }
  .main{
  position: relative;
  top: 5em;
  
  /*home.html*/
  .first{
      @include grids();
      grid-template-areas: 
      'upleft katikati katikati rightsec'
      'downleft katikati katikati rightsec';
      .upper-left{
          grid-area: upleft;
          @include boxes();
          background-image: url('1.jpg');
          @include imgs();
          @include flexmix(column);
          h2 {
              @include fonts(1rem)
          }
      }
      .bottom-left{
          grid-area: downleft;
          @include boxes();
          background-image: url('2.jpg');
          @include imgs();
          @include flexmix(column);
          h2 {
              @include fonts(1rem);
          }
      }
      .middle-sec{
          grid-area: katikati;
          @include boxes();
          margin: 0;
          background-image: url('3.jpg');
          @include imgs();
          @include flexmix(column);
          h1 {
              @include fonts(2rem);
          }
          p{
              @include fonts(0.7rem);
              color: $deepblue;
          }
      }
      .right-sec{
          grid-area: rightsec;
          @include boxes();
          background-image: url('4.jpg');
          @include imgs();
          @include flexmix(column);
          h2 {
              @include fonts(1rem);
          }
      }
  }
  .middle-page {
      margin-top: 30px;
      ul{
      @include grids();
      grid-template-columns: repeat(4, 1fr);
      border: none;
      padding: 5rem;
  
          li{
              list-style: none;
              @include flexmix(column);
              a{
                  text-decoration: none;
                  box-sizing: border-box;
                  padding: 20px;
                  border-radius: 100%;
                  color: $deepyellow;
                  background-color: $deepblue;
                  transition: all 0.3s ease 0.3s;
                  &amp;:hover{
                      transform: scale(1.2, 1.2);
                      opacity: 0.7;
                  }
              }
              small{
                  font-family: sans-serif;
                  margin-top: 5px;                   
              }
          }
      }
  }
  .bottom{
      @include grids();
      grid-template-columns: repeat(2, 1fr);
      @include boxes();
      margin-bottom: 20px;
      border: none;
      align-items: center;
      .picture{
          width: 100%;
          height: 400px;
          box-sizing: border-box;
          padding: 10px;
      }
      p{
          @include fonts(1rem);
          color: $deepblue;
      }
  }
  .footer{
      background: $deepblue;
      padding: 2rem;
      border: none;
      text-align: center;
      p{
          @include fonts(1rem)
          color:$deepwhite;
      }
  }
  }
  </code></pre>
  
  <p>and here is the html`</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel='stylesheet' href='{{url_for('static', filename='scss/style.css')}}'&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
  awesome.min.css"&gt;
  &lt;title&gt;Flask&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header class='header'&gt;
  &lt;div class='checkbox'&gt;
      &lt;input type='checkbox' class='toggler'&gt;
      &lt;div class='btn'&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;nav class='navigation'&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href='{{url_for('home')}}'&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='{{url_for('about')}}'&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href='{{url_for('login')}}'&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  &lt;main class='main'&gt;
      {% block content%}
      {%endblock%}
  &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  {% extends 'layout.html'%}
  {% block content  %}
  &lt;section class='first'&gt;
      &lt;div class='upper-left'&gt;
          &lt;h2&gt;Car Section&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class='bottom-left'&gt;
          &lt;h2&gt;Phone Section&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class='middle-sec'&gt;
          &lt;h1&gt;This is the Home Page&lt;/h1&gt;
          &lt;p&gt;A lamboghini was running with ice. He went far far away.
          He start playing with another lambighini. The lamboghini his name was Prince.
          He was color golden.He was the best lamboghini in the world. Then he said pink lamboghini
          do you want to come with me. And he said yes.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class='right-sec'&gt;
          &lt;h2&gt;Contact Us&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class='middle-page'&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='#'&gt;&lt;i class="fa fa-address-card"&gt;&lt;/i&gt;&lt;/a&gt;&lt;small&gt;Communication&lt;/small&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;&lt;i class="fa fa-bullseye"&gt;&lt;/i&gt;&lt;/a&gt;&lt;small&gt;Task and Projects&lt;/small&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;&lt;i class="fa fa-crosshairs"&gt;&lt;/i&gt;&lt;/i&gt;&lt;/a&gt;&lt;small&gt;CRM&lt;/small&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt;&lt;/i&gt;&lt;/i&gt;&lt;/a&gt;&lt;small&gt;Contact Center&lt;/small&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;section class='bottom'&gt;
      &lt;image class='picture' src='{{url_for('static', filename='scss/picture.jpg')}}', default='image 
  not found'&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias reiciendis deleniti 
  possimus nemo non repellendus?
        Quae atque vero modi quidem! Autem cupiditate fugit doloribus ad amet, asperiores provident 
  commodi.&lt;/p&gt;
  &lt;/section&gt;
  &lt;footer class='footer'&gt;
    &lt;p&gt;Nelliville &amp;copy; 2020&lt;/p&gt;
  &lt;/footer&gt;
  
  {% endblock  %}
  </code></pre>