Footer secondary navigation link styling in 7.1

Site URL: https://coverkitchen.squarespace.com

Hello

I am using version 7.1. My website shows a book cover design portfolio with subpages for each book genre.
I have created a secondary navigation menu on the footer to access directly to each genre using text with hyperlinks.
The header navigation menu changes to back on hover and remains black and also underlined when the linked page is  currently viewed.

My question is: how can I apply a style to the text on the footer that behaves exactly the same way as the header navigation menu?

Now, when I have the same hover effect on the footer, but when I click and view the linked page, the text does not remain in black and does not get underlined.For example, when I click on "Novel" and go to that page, the hyperlink text does not show that this genre is currently selected. See a screenshot attached of the "Novel" page after I clicked on "Novel" hyperlink text on the footer.

Is there any way to achieve this using coding?

Many thanks in advance!

Best wishes,

Xavier

$(document).ready(function() {
  var urlHash = window.location.href.split(".com")[1];
  if (urlHash !== undefined) {
    $('#footer-sections a[href$="' + urlHash + '"]').attr('style', 'color: black !important; text-decoration: underline !important;')
  }
});

You will need to have a business account, follow the instructions in my signature to add jquery.

Put the the codes in the site wide footer injection.

@rwp My apologies as I hadn't seen your reply until now.  I have activated replies notification to ensure that doesn't happen again.

A million thanks for this amazing code! It's very clever. I have put it in the footer code injection section and it works well. However, the links don't remain activated after I visit any project within that genre. Each genre is created as a portfolio page. Would it be possible to show activated links when inside a portfolio subpage? For instance, if I click on the project "Written in Black" the URL is: /literary/written-in-black
Could the code be tweaked for the URL to include all the subpages within each genre?

And a last question. I would like to match the styling of the footer secondary navigation with the header navigation menu (all links in light grey (#999999) as default color and in black on hover). This is the code I put to stylize the header:

.header-nav-item a {
    color: #999999 !important; 
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #000000 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #000000 !important;
}

This is the password to access, just in case you need to look into it: CK2020.

I can't thank you enough for your valuable assistance!

Warm regards,

Xavier

Give this a go, you will have to replace the other code.

$(document).ready(function() {
  var urlHash = window.location.href.split(".com")[1].split("/")[1];
  if (urlHash !== undefined) {
    $('#footer-sections a[href$="' + urlHash + '"]').attr('style', 'color: black !important; text-decoration: underline !important;')
  }
});

To change the colors, you will need to add this to design -> css

#footer-sections a {
    color: #999999 !important; 
}

#footer-sections a:hover {
    color: #000000 !important;
}

@rwp You rock! Thank you so much again. It works perfectly. 

Now, if you don't mind to go a step further, would be possible to do the following?

1– On hover, all items in the dropdown navigation folder behave the same way: as the header and the footer menus (#99999 by default, black on hover and underlined & black when active. The idea is to provide the entire website link navigation with a global styling.

– This request is a bit more tricky. Would be possible to have the underline everywhere on the website a bit separated from the item? (same as shown on the header menu). That is the fashion by default by Squarespace underlines links but I suspect that is different from the underline decoration...

Many thanks in advance!

Xavier

The password isn't working.

Some themes use a bottom border instead of text-decoration.

@rwp Just fixed the password: CK2020

Let me know how it goes.

@rwp Good news, I managed to figure it out myself. Many thanks again for your outstanding help!