Page redirected is causing a problem to select the correct active page

Question

I'm using Squarespace, set the page "danieconz.com/about" as my homepage and, as so, it gets redirected to "danielconz.com".

I've created links to pages at the footer and some CSS codes. My problem is that, when I'm at "danielconz.com" these links get all selected. However, only the "About" link should be selected.

Here's the CSS I'm using:

    @media all and (max-width:750px) {
#footer h1 {
    width: 120px;
    margin: 0 auto;
    padding-bottom: 0px;
    line-height: 70px!important;
 }
#footer h1 .active-link {
  border-top: 2px solid #1a1611;
}
#footer h1 a:hover {
  border-top: 2px solid #1a1611;
}
}

@media all and (min-width:750px) {
#footer h1 a:hover {
  border-top: 2px solid #1a1611;
  padding: 0px !important;
}

#footer h1 .active-link  {
  border-top: 2px solid #1a1611;
  padding: 0px !important;
}
}

And follow a couple of images of the problem on desktop and mobile. Could anyone please help me with that? Thanks in advance.

desktop mobile

Answer 1

You have a javascript adding the link-active class to the links in your footer.

A quick thing you can do is change the function to this, please check it:

$(function() {
if(location.pathname.split("/")[1]==""){
    $('footer h1 a').removeClass('active-link');
    $('footer h1 a[href^="/about"]').addClass('active-link');
}else{
    $('footer h1 a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
}
$('body').addClass('enter');//This part is the same
});