Responsive menu icon not visible

Hello, I have a responsive nav bar and I want to make a burger icon appear (two divs) when the breakpoint is 640px, but it doesn’t work. Maybye is sth wrong with the position of my divs?

Thanks in adavnce for your help!

<div class="about-page">
      <div class="sous-menu-burger">

        <div class="line"></div>

        <div class="line"></div>

    </div> 

    <div class="cont-main">

        <div id="menuMobile" class="menuMobile"> 

                <a href="#"><div class="home-a">Home</div></a>

                <a class="active" href="#"><div class="about-a">About</div></a>

                <a href="#"><div class="skills-a">Skills</div></a>

                <a href="#"><div class="projects-a">Projects</div></a>

                <a href="#"><div class="contacts-a">Contacts</div></a>

        </div>

        <div class="contText">

            <div class="titre">About</div>
      </div>
 </div>

.menuMobile {

      position: absolute;

      margin-top: 10%;

      margin-left: 10%;

      margin-right: 10%;

      margin-bottom: 35%;

      height: 62%;

    }

    @media only screen and (max-width: $sm) {

      .line {

        width: 30px;

        height: 30px;

        margin: 50px;

        margin-left: 10%;

        margin-top: 50%;

        color: aliceblue;

      }

 

      .about-page {

        position: relative;

      }

      .sous-menu-burger {

        position: absolute;

        cursor: pointer;

        right: 5%;

        top: 50%;

        transform: translate(-5%, -50%);

        z-index: 1000;

      }

      .menuMobile {

        position: fixed;

        background-color: black;

        height: 100%;

        width: 100%;

        margin-left: 0%;

        margin-top: 0%;

        padding-left: 21%;

        padding-top: 33%;

        animation: run 1s cubic-bezier(0.3, 0.46, 0.45, 0.94);

      }

      @keyframes run {

        0% {

          right: 0%;

        }

        100% {

          right: 100%;

        }

      }

      .menuMobile.open {

        animation: run 1s cubic-bezier(0.3, 0.46, 0.45, 0.94);

      }

      @keyframes run {

        0% {

          right: 100%;

        }

        100% {

          right: 0;

        }

      }

    }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.