I have been working on my website for a while now and over time I have continued to add many sections to my website but I have been manually editing each page and every time I add a new button to redirect to a new section, and while this isn't difficult or takes too long, I'm not sure how well this will work in the long run.
The following are related titles
Is there a way to make these elements consistent on every page by changing just one file?
This is my HTML code
<div class="logocontainer">
<a href="index.html">
<img src="images/badasslogo.png" align="center" class="logo"></a>
</div>
<body>
<div class="buttoncontainer">
<a href="index.html">
<img src="images/buttons/homebutton.png" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.png" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.png" class="button"></a>
<a href="fanart/fanartmain.html">
<img src="images/buttons/fanartbutton.png" class="button"></a>
<a href="partners/partnersmain.html">
<img src="images/buttons/partnersbutton.png" class="button"></a>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.png" class="button"></a>
<a href="servers/serversmain.html">
<img src="images/buttons/serversbutton.png" class="button"></a>
<a href="downloads/downloadsmain.html">
<img src="images/buttons/downloadsbutton.png" class="button"></a>
<a href="extras/extrasmain.html">
<img src="images/buttons/extrasbutton.png" class="button"></a>
<a href="donate/donatemain.html">
<img src="images/buttons/donatebutton.png" class="button"></a>
<a href="about/about.html">
<img src="images/buttons/aboutbutton.png" class="button"></a>
</div>
This is CSS
.logocontainer {
text-align: center;
}
.logo {
display: inline-block;
margin-bottom: 10px;
}
.buttoncontainer {
text-align: center;
}
.button {
display: inline-block;
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to add your menu to the menu.html page, and then call the menu.html page through jquery.
menu.html
<a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a>Index.html
<html> <head> <title>abc</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </head> <body> <div class="logocontainer"> <a href="index.html"> <img src="images/badasslogo.png" align="center" class="logo"></a> </div> <div class="buttoncontainer" id="buttoncontainer"> </div> <script> <!-- Call this script on all page--> $(document).ready(function () { $('#buttoncontainer').load('menu.html'); }); </script> </body> </html>You can do this:
In your header.js file, you can do this:
let headerContent = ` <a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a> `; document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);Call this on all pages and once you make an edit in the js file it will be applied to all changes on all pages.