Page to Scroll plugin between pages

Hey,

I’m new to web design and I’m using the free SiteOrigin North theme with Live Editor plugin and I have a question regarding the page scroll to ID plugin that I’m using.

Most of my website is on one page with different rows, for which the page scroll to ID plugin work fine with a sticky menu with custom links. I have a few other pages as well (which are not on the landing page). Those pages are reached by clicking on links in the website, but not through the menu itself. When I go to another page (not placed on the landing page), the links back to the landing page which are placed in the sticky menu does not work. I solved this problem by adding the full URL as custom links in the menu (appearance –> menu).

However, when I added the the full URL to all custom links, they are all highlighted when I scroll through the landing page. Both when they are clicked and when they are not.

So my question is how I can make my menu items highlighted when clicked even if I have the full URL in my custom links.

Before I used this code in the custom CSS which underlined the menu items on hover (but it looked bad when I added the full URLs so I removed it):

}
.main-navigation .menu > .menu-item > a::after {
content: “”;
position: absolute;
right: 0;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}

Any ideas of how I can use the page to scroll ID plugin between pages, using the full URL as custom links (if necessary) and still get the specific menu item highlighted when clicked?

Have a great day!
Anton