How to fix this nav menu burger button?

Question

I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all. The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.

picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png

Link of the website http://maderines.000webhostapp.com/

 const ipad = window.matchMedia('screen and (max-width: 658px)'); const menu = document.querySelector('.menu'); const burgerButton = document.querySelector('#burger-menu'); ipad.addListener(validation) function validation(event) { if (event.matches) { burgerButton.addEventListener('click', hideShow); } else { burgerButton.removeEventListener('click', hideShow); } } validation(ipad); function hideShow() { if (menu.classList.contains('is-active')) { menu.classList.remove('is-active'); } else { menu.classList.add('is-active'); } } 

 /* start HEADER */ .header { background-color: rgba(0, 0, 0, 0.692); color: white; display: flex; height: 80px; width: 100%; justify-content: space-around; flex-wrap: wrap; position: fixed; z-index: 2; } .header figure { justify-self: center; padding-top: 5px; } .menu { height: inherit; } .header ol { font-family: inherit; display: flex; height: inherit; font-size: 17px; } .header ol li { height: inherit; } .header a { color: white; text-decoration: none; display: flex; align-items: center; height: inherit; padding: 0 10px; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; } .header ol a:hover { transform: scale(1.2); opacity: 1; } ol, ul { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } .burger-button { width: 60px; height: 60px; line-height: 60px; text-align: center; display: none; position: fixed; left: 10px; top: 20px; color: white; font-size: 28px; } /* end HEADER */ /* start Responsive */ @media screen and (max-width:781px) { .header { display: flex; flex-wrap: wrap; flex-direction: column; height: auto; align-items: center; } } @media screen and (max-width:658px) { .burger-button { display: block; position: fixed; z-index: 3; justify-content: center; align-self: center; top: 15px; } .header ol { display: block; font-size: 20px; } .header ol li { height: 40px; } .menu { position: fixed; background-color: rgba(0, 0, 0, 0.692); top: 12%; left: -300px; height: auto; transition: .3s; } .menu.is-active { left: 0; } } @media screen and (max-width:480px) { .burger-button { top: 10px; } .menu { top: 12%; } } @media screen and (max-width:425px) { .menu { top: 14%; } } @media screen and (max-width:320px) { .menu { top: 14vh; } .burger-button { line-height: 40px; width: 40px; height: 40px; left: 10px; top: 15px; font-size: 20px; } } 

 <i class="icon-menu burger-button" id="burger-menu"></i> <div class="fondo"> <header class="header"> <figure class="logo "> <a href="index.html"><img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch"></a> </figure> <nav class="menu"> <ol> <li><a href="index.html" class="link">Inicio</a></li> <li><a href="./nuestros_trabajos/indexing.html" class="link">Nuestros trabajos</a></li> <li><a href="#contacto" class="link">Contacto</a></li> </ul> </nav> </header> 

Answer 1

If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:

  const ipad = window.matchMedia('screen and (max-width: 658px)'); const menu = document.querySelector('.menu'); const burgerButton = document.querySelector('#burger-menu'); ipad.addListener(validation) function validation(event) { if (event.matches) { burgerButton.addEventListener('click', hideShow); } else { burgerButton.removeEventListener('click', hideShow); } } validation(ipad); function hideShow() { if (menu.classList.contains('is-active')) { menu.classList.remove('is-active'); } else { menu.classList.add('is-active'); } } 

  /* start HEADER */ .header { background-color: rgba(0, 0, 0, 0.692); color: white; display: flex; height: 80px; width: 100%; justify-content: space-around; flex-wrap: wrap; position: fixed; z-index: 2; } .header figure { justify-self: center; padding-top: 5px; } .menu { height: inherit; } .header ol { font-family: inherit; display: flex; height: inherit; font-size: 17px; } .header ol li { height: inherit; } .header a { color: white; text-decoration: none; display: flex; align-items: center; height: inherit; padding: 0 10px; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; } .header ol a:hover { transform: scale(1.2); opacity: 1; } ol, ul { margin: 0; padding: 0; list-style: none; } figure { margin: 0; } .burger-button { width: 60px; height: 60px; line-height: 60px; text-align: center; display: none; position: fixed; left: 10px; top: 20px; color: white; font-size: 28px; } /* end HEADER */ /* start Responsive */ @media screen and (max-width:781px) { .header { display: flex; flex-wrap: wrap; flex-direction: column; height: auto; align-items: center; } } @media screen and (max-width:658px) { .burger-button { display: block; position: fixed; z-index: 3; justify-content: center; align-self: center; top: 15px; } .header ol { display: block; font-size: 20px; } .header ol li { height: 40px; } .menu { position: absolute; background-color: rgba(0, 0, 0, 0.692); top: 97%; left: -300px; height: auto; transition: .3s; } .menu.is-active { left: 0; } } @media screen and (max-width:480px) { .burger-button { top: 10px; } .menu { top: 97%; } } @media screen and (max-width:425px) { .menu { top: 97%; } } @media screen and (max-width:320px) { .menu { top: 97%; } .burger-button { line-height: 40px; width: 40px; height: 40px; left: 10px; top: 15px; font-size: 20px; } } 

  <i class="icon-menu burger-button" id="burger-menu"></i> <div class="fondo"> <header class="header"> <figure class="logo "> <a href="index.html"><img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch"></a> </figure> <nav class="menu"> <ol> <li><a href="index.html" class="link">Inicio</a></li> <li><a href="./nuestros_trabajos/indexing.html" class="link">Nuestros trabajos</a></li> <li><a href="#contacto" class="link">Contacto</a></li> </ul> </nav> </header> </div>