Keeping header and footer in separate file

Hello
I am using the index-corporate as my template.
I am trying to keep the header and the footer in a separate html file so I can then include it into the different pages so I only need to change the one header/footer file to update all pages.

I tried to use

1. php includes: <?php include "header.html" ?>
2. with JS
   putting <nav class=navbar> in html file and having JS file of
   const nav = document.querySelector('.navbar')
   fetch('header.html')
   .then(res=>res.text())
   .then(data=>{
   nav.innerHTML=data
   const parser = new DOMParser()
   const doc = parser.parseFromString(data, 'text/html')
   eval(doc.querySelector('script').textContent)
   })

However, some styles get lost even after copying the whole header section from style.css into the header.html file. and the slider below the menu does not get appear.

How should I proceed? To be able to keep headers and footers in a separate file to make it modular?

Thanks a lot!
Kind regards
Jonas

So like this the Slider below is not working, the search bar is not working and the transition from transparent header to normal header is not working. Arrows for the submenu also dissapear.

If I only keep the primary navigation in a separate file then the style of it is lost. but everything else would work more or less.

I found an old post on here and was able to overcome it with my 1. method by further changing file type to .php. Is there any downside using .php instead of .html or things that I have to be aware of?

Kind regards
Jonas

.