Tengo todo mi header montado con sus estilos y demás pero me falta adaptarle a móvil, en lo que quiero la mitica Hamburguesa (icono de tres rayas). No sé como hacer para darle click y que salga el menu desplazado desde la izquierda preferiblemente. Os dejo mi codigo html y acepto cualquier sugerencia al respecto.
<!--menu moviles-->
<input onclick="javascript:changeClass();" type="checkbox" id="menu-bar">
<label id="etiqueta-menu" class="fas fa-bars" for="menu-bar"></label>
<header>
<div class="container">
<div class="nav-main left vertical__align justify__center">
<ul>
<lI>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>GASTRONOMIA</span></a>
</li>
<li>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>HOSTELERIA</span></a>
</li>
<li>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>RUTAS Y PAISAJES</span></a>
</li>
</ul>
</div>
<a href="https://www.burywholefoods.co.uk/" class="logo"> <img class="lazy lazy-loaded" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Yale_%28company%29_logo.png" alt="Bury Wholefoods" width="100" height="100"></noscript> </a>
<div class="nav-main right vertical__align justify__center">
<ul>
<li>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>MAPA GEOGRÁFICO</span></a>
</li>
<li>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>MULTIMEDIA</span></a>
</li>
<li>
<a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>NUESTRAS TRADICIONES</span></a>
</li>
</ul>
</div>
</div>
</header>
Ya tengo hecho el click, me falta poner algo en el css para que salga el menu hacia la derecha y que se muestren todos los <li>
que tengo en el codigo.