I wanted to make a header with navs (local website) , and the same header will be repeated in all pages. So instead of copy pasting it, i made a custom element in js. The problem is that the hrefs in the main page will be different than the other pages.

This is how it should be in the main page

<a href="pages/somepage.html">

And this is how it should be in other pages who are in the same folder

<a href="somepage.html">

Using a custom element will make them all have the same href.

Is there a solution to this or am i missing something really obvious ? I could just have them all in the same folder but that will get messy the more pages i add.