Jump to content

Adding border to active folder

Recommended Posts

Posted (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 by HippySip
Posted

You password doesn't seem to be 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?

Posted

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.

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?

Posted
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. 

Posted

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.

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?

Posted
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.

Posted
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.

Posted

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?

Posted
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.

Posted

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?

Posted (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.

image.thumb.png.5f8287a5ffacddd705c65f18311e1cd3.png

 

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 by HippySip
Posted

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?

Posted

Great, nice job getting 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?

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.