Armé lo siguiente que quizás te pueda ayudar, quizás no sea la mejor opción, podrías optar por algo como motores de templates como ejs, pug o nunjunks en Node por ejemplo, u otros recursos como React, Angular o Vue.. Pero puede ayudar para resolver el planteo.

Aquí va lo que armé:

**Archivo index.html**

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
      </head>
      <body>
        <div id="navbar"></div>
    
        <hr />
    
        <section>
          <h2>Contenido</h2>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, blanditiis.
          Ea aliquam voluptatibus eligendi fugit enim consectetur, soluta sed,
          reiciendis voluptas quisquam, cum obcaecati id assumenda? Cum velit rem
          ex?
        </section>
    
        <hr />
    
        <div id="footer"></div>
    
        <script src="importFiles.js"></script>
        <script>
          getComponent("navbar", "navbar.html");
          getComponent("footer", "footer.html");
        </script>
      </body>
    </html>

**En este archivo hay 3 partes importantes.**

La primera son los DIVs con id navbar y footer.

    <div id="navbar"></div>
y

    <div id="footer"></div>

La segunda es el script src al archivo importFiles que es un script que a continuación detallaré, es la siguiente línea:

    <script src="importFiles.js"></script>

La tercera es sencillamente un bloque de script donde se invoca a una función creada que recibirá 2 parámetros, el primero es el id del elemento donde se desea importar el contenido del otro archivo y el segundo es el nombre del archivo a importar, quedando de la siguiente manera:

     getComponent("navbar", "navbar.html");
     getComponent("footer", "footer.html");

**Archivo importFiles.js**

    async function getComponent(container, fileName) {
      const response = await fetch(fileName);
      const fileToImport = await response.text();
      const targetContainer = document.getElementById(container);
      targetContainer.insertAdjacentHTML("beforeend", fileToImport);
    }

Finalmente cree 2 archivos solo para prueba un archivo navbar.html con el siguiente contenido:

    <div>
      <h1>Prueba Navbar</h1>
    </div>

Y un archivo footer.html con el siguiente contenido:

    <div>
      <p>Esto sería el footer</p>
    </div>

Entre medio de ellos agregué una etiqueta section con un párrafo solo para simular una estructura básica de navbar, contenido y footer.

Todos los antes mencionados archivos están en la misma carpeta para simplificar, si esto cambia se deberán modificar las rutas.