Como lo indican las etiquetas en sus publicaciones, está utilizando jQuery. Por lo tanto, intente lo siguiente:

Primero, agregue el estilo display: none a todos los elementos que deben estar ocultos al principio. Por conveniencia, puede usar una clase oculta.

 .hidden { display: none; }

Luego, agregue un evento onclick al botón que oculta el botón y revela todos los elementos previamente ocultos.

 $("start__button").on("click", function() { $(this).hide(); $(".hidden").show(); });

 const mainButton = document.getElementById("start__button").addEventListener("click", function(event){ document.getElementById("navbar").classList.toggle("hidden"); });

 .hidden{ display:none; }

 <navbar id="navbar">My navbar body....</navbar> <button id="start__button">My Button</button>

Esto podría ayudarte
Mediante la función classList.toggle() , puede alternar la clase de la barra de navegación o cualquier otro elemento html al hacer clic en el botón y, luego, con CSS simple, no solo puede ocultar o mostrar el elemento, sino también realizar otros cambios.
No se recomienda eliminar todo el elemento del documento y luego volver a agregarlo mediante element.innerHTML = "..." . Gracias.

Puede agrupar todo el contenido que desea mostrar después de hacer clic en un elemento contenedor.

 const mainButton = document.getElementById("start__button"); mainButton.addEventListener("click", function(event){ this.remove(); document.querySelector('main').classList.remove('hidden') });

 .hidden { display: none; } main > * { padding: 1rem; } nav, footer { background: black; color: #fff; }

 <button id="start__button">start</button> <main class="hidden"> <nav>Navigation</nav> <section>Content</section> <footer>Footer</footer> </main>