zzlogan Posted August 12, 2021 Share Posted August 12, 2021 Site URL: https://pomegranate-badger-p3wd.squarespace.com/ Hi, I'm using 7.1. I have five Main Navigation pages that are associated to pages that are in the Not Linked section of Squarespace. I'm trying to make it so when someone is viewing a Not Linked Page, the Main Navigation associated to that page remains underlined. For example: so when someone is on Issue #1: Disrupt (Not Linked Page), Magazine (Main Navigation) is still underlined How can you do this without using Folders? @tuanphan, @bangank36, @creedon Link to comment
Solution creedon Posted August 13, 2021 Solution Share Posted August 13, 2021 It may be possible to do this with CSS only but it seems to me it would be a more tortuous route. Javascript seems a better fit here. Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { /* begin add navigation magazine underline to magazine subpages Version : 0.1d0 SS Version : 7.1 Dependancies : jQuery By : Thomas Creedon < http://www.tomsWeb.consulting/ > no user serviceable parts below */ // bail if not magazine subpage if ( ! location.pathname.startsWith ( '/magazine/' ) ) return; $( '.header-nav-item [href="/magazine"]' ) .parent ( ) .addClass ( 'header-nav-item--active' ); // end add navigation magazine underline to magazine subpages } ); </script> Let us know how it goes. zzlogan and tuanphan 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
zzlogan Posted August 17, 2021 Author Share Posted August 17, 2021 @creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works. Thank you for sharing this approach. creedon 1 Link to comment
timjphoto Posted March 31, 2022 Share Posted March 31, 2022 @creedon I hope you don't mind me resurrecting this thread but I'm trying to do exactly the same thing on my site, I would love to keep the 'PROJECTS' navigation heading highlighted when in any of the unlinked project gallery pages. I'm on version 7.0 so I don't think this code will work for me? Any help would be greatly appreciated. www.timjobling.co.uk Link to comment
creedon Posted March 31, 2022 Share Posted March 31, 2022 38 minutes ago, timjphoto said: I would love to keep the 'PROJECTS' navigation heading highlighted when in any of the unlinked project gallery pages. I'm on version 7.0 so I don't think this code will work for me? No the code wouldn't work for your site. In addition the code was pretty easy to implement because the pages of interest were under the /magazine area of the site. That made it easy to add the css to make the effect happen. Your projects are at the top level of the site so a different method would be required to achieve a similar effect. Either explicitly adding each url to the code so it knows what URLs are projects. Something like... const urls = [ '/hessia-studio', '/carter-road-skatepark', etc... ]; Alternately if your projects are always going to be at the top level and you only have a few other non-project top level pages, it may be easier to always apply the effect except when on certain pages. const urlsExclude = [ '/news', '/about-1', etc... ]; So there are a couple of options. Change your project URLs to be something like /projects/hessia-studio. Then it would be pretty easy to alter the above code to work for your site. It would also basic be self maintaining as long as you keep the same URL structure. You'd want to consider the effect that change may have on your search rankings. There are ways to mitigate that issue but that is another topic. The second is basically what I described about including or excluding the effect based on specific page. That code would need to be updated every time you made a URL change or added or deleted pages. Which method do you think would work for your needs? The above code snippets are not to be installed. They are pseudo code. timjphoto 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
timjphoto Posted March 31, 2022 Share Posted March 31, 2022 @creedon Thanks very much for the reply. I think the second option you mentioned might suit me better, I would be wary of making any changes that may affect search rankings, and I'm more than happy to update the code when making new pages as I don't add galleries that often. Thank you, Tim. Link to comment
creedon Posted March 31, 2022 Share Posted March 31, 2022 17 minutes ago, timjphoto said: I think the second option you mentioned might suit me better Do you think explicitly telling the code which pages are projects or telling it what pages are not projects would work better for you? In many cases I would think the later approach would mean less contact ( having to edit it ) with the code. Quote I would be wary of making any changes that may affect search rankings There is risk of course with any changes to well established URLs within a site in relation to search engines. But as I mentioned those risks can be reduced by using SS's built-in URL redirects feature. timjphoto 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
timjphoto Posted April 1, 2022 Share Posted April 1, 2022 @creedon Apologies I see what you're saying now, I think telling the code which pages are not projects would be better as there are far fewer of them. I'll take a look at the URL redirects. Thanks. Link to comment
creedon Posted April 2, 2022 Share Posted April 2, 2022 @timjphoto Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add header navigation projects link active on "project" pages to Settings > Advanced > Code Injection > FOOTER. Let us know how it goes. timjphoto 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
timjphoto Posted April 3, 2022 Share Posted April 3, 2022 @creedon That works perfectly, thank you very much! creedon 1 Link to comment
timjphoto Posted April 3, 2022 Share Posted April 3, 2022 @creedon I’ve just found a little tweak I was wondering if you might be able to help with. I’ve noticed that when I clicI on any of the blog sections the nag goes back to highlighting ‘projects’ in the navigation, is it simple to have them highlight ‘news’ for the blog posts instead? Many thanks again for your help, Tim. Link to comment
creedon Posted April 4, 2022 Share Posted April 4, 2022 @timjphoto This is where you add in other url slugs you want to exclude from the effect. So the bit in the code that looks like... // '[enter url slug here between single quotes]', 'about-1', 'news', ]; ...becomes... // '[enter url slug here between single quotes]', 'about-1', 'news', 'tim-jobling-photography', ]; I assume tim-jobling-photography is the slug for your blog. Let us know how it goes. timjphoto 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
timjphoto Posted April 4, 2022 Share Posted April 4, 2022 @creedon Thanks very much for your reply, very much appreciated, I'll take a look. Link to comment
CharlieGeyer86 Posted April 8, 2022 Share Posted April 8, 2022 I have a similar issue to OP, but it's slightly different. The site is amydittmar.com pw: dittmar I am using a folder with links to individual portfolio projects in the top navigation (WORK), because that seems to be the only way to generate a dropdown menu in the top navigation that reveals the individual projects. When a project is active I'd like the parent menu item (WORK) to have the active state. This is the default behavior when a page is active within a folder, but it doesn't work with links. I am on a personal plan, so I'm unable to inject code into the header or footer, and I am hoping to avoid having to upgrade my plan just for this one little line. haha. I currently disabled the underline on the ABOUT page so the experience would be consistent, but this is a stop gap measure. Let me know if you need more info! Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/9/2022 at 3:03 AM, CharlieGeyer86 said: I have a similar issue to OP, but it's slightly different. The site is amydittmar.com pw: dittmar I am using a folder with links to individual portfolio projects in the top navigation (WORK), because that seems to be the only way to generate a dropdown menu in the top navigation that reveals the individual projects. When a project is active I'd like the parent menu item (WORK) to have the active state. This is the default behavior when a page is active within a folder, but it doesn't work with links. I am on a personal plan, so I'm unable to inject code into the header or footer, and I am hoping to avoid having to upgrade my plan just for this one little line. haha. I currently disabled the underline on the ABOUT page so the experience would be consistent, but this is a stop gap measure. Let me know if you need more info! Add to Design > Custom CSS body.collection-62125f01d0ec7d5c8be58f6f.view-item .header-nav-folder-title[href="/work-1"] { text-decoration: underline; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment