Tengo una barra de navegación construida dinámicamente como muestra el siguiente código: (y funciona bien)

 NavBuilder = () => { //to loop from section 1 to 4 and add sections to navigation for (s = 0; s < sections.length; s++) { const liElem = document.createElement('li'); //const divElem = document.createElement("div"); const Id = sections[s].id; const DataNav = sections[s].dataset.nav; liElem.innerHTML = `<a class="menu__link" href="#${Id}">${DataNav}</a>`; Menu.appendChild(liElem); } } NavBuilder();

mi barra de navegación debe ser compatible con dispositivos pequeños... así que para lograr esto necesito hacer un menú de hamburguesas para poner el liElem dentro de ese menú de hamburguesas. alguna idea de como puedo hacerlo?

el codigo html es:

 <header class="page__header"> <nav class="navbar__menu"> <!-- Navigation starts as empty UL that will be populated with JS -> <ul id="navbar__list"></ul> </nav> </header> <main> <header class="main__hero"> <h1>Landing Page </h1> </header> <section id="section1" data-nav="Section 1"> <div class="landing__container"> <h2>Section 1</h2> <p> porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p> </div> </section> <section id="section2" data-nav="Section 2"> <div class="landing__container"> <h2>Section 2</h2> <p> porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p> </div> </section>