coverkitchen Posted September 13, 2020 Share Posted September 13, 2020 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 Link to comment
rwp Posted September 13, 2020 Share Posted September 13, 2020 $(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. Link to comment
coverkitchen Posted September 24, 2020 Author Share Posted September 24, 2020 @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 Link to comment
rwp Posted September 24, 2020 Share Posted September 24, 2020 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; } Link to comment
coverkitchen Posted September 24, 2020 Author Share Posted September 24, 2020 @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 Link to comment
rwp Posted September 24, 2020 Share Posted September 24, 2020 The password isn't working. Some themes use a bottom border instead of text-decoration. Link to comment
coverkitchen Posted September 24, 2020 Author Share Posted September 24, 2020 @rwp Just fixed the password: CK2020 Let me know how it goes. Link to comment
coverkitchen Posted September 26, 2020 Author Share Posted September 26, 2020 @rwp Good news, I managed to figure it out myself. Many thanks again for your outstanding help! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.