This might be a multy-layered problem as I am using multiple technologies I am not proficient with but I hope I can get some help.

I have a HTML/CSS/JS front-end which I have purchased from a random template website. I am making my own back-end using the Django framework. I am running into an issue with the navbar-link objects that the front-end has on the navbar object. Originally the front-end is a single page application for a personal portfolio website, and I am splitting the sections up to be in actual pages.

Originally the link code looks like this:

Where I can see that the href property is linking to different sections defined later on in the webpage.

After my moving around of contents into different pages and adding the django relevate templating it looks like this:

We can see I modified the href property and introduced the different links using django's commands.

At first I thought it was a django issue but then I tested that by disabling javascript and everything works fine without it. Then I thought that something I messed up the main.js file that this front-end came with, yet I have not found anything in it that modifies the nav-link or nav-items. Another thing that I noticed is that if I right-click -> open in new tab, then the links work fine.

Any suggestions on what could be going wrong here?