How can I make my navi-bar the same across my html?

Question

With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets.

Answer 1

In fact, if you are doing only front-end stuff like I do, using load() with jQuery is more than enough. Just like what Skitty and fskirschbaum said.

But I would like to add a few points,
1. based on @Skitty's comment, it is important to load your navbar.html on the server side, like simply host it on your github.io website and refer to it by its URL like

 $(document).ready(function() {
   $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');} 

2. if you have css file, just put it inside < style >< /style> in the < header > part of your html file.

I push my code on github if you need some reference. Hope it helps! https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template