HippySip Posted October 20, 2022 Posted October 20, 2022 (edited) I used code to make folders clickable, now I want to give those folders a border when active. The code I use now only makes the home link in the nav bar with border, but not the folders. I was able to make them change when hovering but not active. help would be appreciated thank you in advance. url: https://hippysip.squarespace.com/ Pass: Welkom1234 Edited October 20, 2022 by HippySip
Ziggy Posted October 20, 2022 Posted October 20, 2022 You password doesn't seem to be working. HippySip 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 20, 2022 Author Posted October 20, 2022 (edited) I'm sorry I accidentally added a exclamation mark it should be just Welkom1234 Edited October 20, 2022 by HippySip
Ziggy Posted October 20, 2022 Posted October 20, 2022 Unfortunately as the folder is redirecting, the navigation is not the "active navigation item" which make this tricky. You could set it up manually for each page. target the nth nav item and add the code to the correct page header code injection. HippySip 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 20, 2022 Author Posted October 20, 2022 6 minutes ago, Ziggy said: Unfortunately as the folder is redirecting, the navigation is not the "active navigation item" which make this tricky. You could set it up manually for each page. target the nth nav item and add the code to the correct page header code injection. Okay I get that I think, how exactly would I target the nth nav item? Is it possible you can give a basic example? Thank you for looking into it either way I'm really thankfull otherwise I would've struggled for days.
Ziggy Posted October 20, 2022 Posted October 20, 2022 Something like this, you'll have to insert the styling: <style> .header-nav-item:nth-child(2) { color:red; } </style> use (2) or (3) depending on which page you're adding this to. You may also want to add some padding to the nav items before hover so they don't jump around so much. HippySip 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 20, 2022 Author Posted October 20, 2022 9 minutes ago, Ziggy said: Something like this, you'll have to insert the styling: <style> .header-nav-item:nth-child(2) { color:red; } </style> use (2) or (3) depending on which page you're adding this to. You may also want to add some padding to the nav items before hover so they don't jump around so much. I'm gonna try it this way, thank you so much. Ziggy 1
HippySip Posted October 23, 2022 Author Posted October 23, 2022 On 10/20/2022 at 4:18 PM, Ziggy said: Something like this, you'll have to insert the styling: <style> .header-nav-item:nth-child(2) { color:red; } </style> use (2) or (3) depending on which page you're adding this to. You may also want to add some padding to the nav items before hover so they don't jump around so much. I've tried different things with this code but i end up getting either: It's always there and not only when active. .header-nav-item:nth-child(2){ It's only there when i hold down click (the moment I let go the styling goes aswell). .header-nav-item:nth-child(2) a:active { Or it just doesn't show up at all. .header-nav-item:nth-child(2) active { Could someone please help I don't get what i'm doing wrong I've tried different solution I could find but nothing seems to do what I want it to.
Ziggy Posted October 23, 2022 Posted October 23, 2022 The active won't work as the folder is not active with your setup. Did you add this to the individual page header code injection area for the relevant pages in the navigation? Or did you add it globally? It needs to be done the first way. It's not a great solution, but the only way I can see it working. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 23, 2022 Author Posted October 23, 2022 8 hours ago, Ziggy said: Did you add this to the individual page header code injection area for the relevant pages in the navigation? The only way I know how it either creating a code block on that page, or from home>settings>advanced>code injection. The first option is the only one not global right? But this creates a blank white space which doesn't look that clean. The second one is globally right? If i put it in there it will be on every page. I have tried looking for another way to put code in just one page, but couldn't find anything. Am I missing something? I'm really thankfull that you're helping us with this.
Ziggy Posted October 24, 2022 Posted October 24, 2022 Look at this guide: Per-page code injection Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 24, 2022 Author Posted October 24, 2022 (edited) 1 hour ago, Ziggy said: Look at this guide: Per-page code injection Okay thank you I was missing that but because it's a folder and not a page I don' t get that option. I did really want to make these changes tho, so I figured something out. I did the following: Every page has a different body ID on my site it was called "collection-..." Then I used your code to only speak to one of the header items (thank you). And styled it with my css code. Now it changes the folder in the header only when on that page. .collection-632c5651f748090f6001cc6a .header-nav-item:nth-child(2){ border: 2px solid green; border-radius: 50px !important; border-fill: black; background-color: black; } Thank you for all your help. And I hope I explained it well enough for other people to use with the same problem. Edited October 24, 2022 by HippySip
Ziggy Posted October 24, 2022 Posted October 24, 2022 Add the code to the page header code injection on the pages within the folder. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
HippySip Posted October 24, 2022 Author Posted October 24, 2022 (edited) I had already put the code in the normal css and it worked. Edited October 24, 2022 by HippySip
Ziggy Posted October 24, 2022 Posted October 24, 2022 Great, nice job getting it working! tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment