How do I target a specific link in the main menu with CSS?

Hi all!

Is there any way to target specific links in the main menu using CSS? For example, I'm looking to make each link in my main menu a different color.

https://garlic-orb-gdec.squarespace.com/

PW to site is pleasehelp. 🙂

Julia

It worked!! Thank you Tuanphan, you coding legend.

hi @tuanphan, this solution worked great for creating faux-button styles for some of my links.

However, I want to target their outer container to use a flex-grow property to force a line break in the nav link flexbox. Is there a way to modify this code to do so?

On 8/15/2023 at 3:10 AM, giorgiasage said:

hi @tuanphan, this solution worked great for creating faux-button styles for some of my links.

However, I want to target their outer container to use a flex-grow property to force a line break in the nav link flexbox. Is there a way to modify this code to do so?

Which position you want to add line break? after Apply item or?

Hi @tuanphan I think this is a similar issue. I have two buttons in my main nav and I want to just target one of them. Is there a way for me to change the background colour of just the "Match with a Therapist" button in my header nav?

https://goldfish-wrasse-48kn.squarespace.com/
password: igc

On 3/5/2024 at 3:12 AM, hey_sp said:

Hi @tuanphan I think this is a similar issue. I have two buttons in my main nav and I want to just target one of them. Is there a way for me to change the background colour of just the "Match with a Therapist" button in my header nav?

https://goldfish-wrasse-48kn.squarespace.com/
password: igc

You can use this CSS code

#siteWrapper header#header a.btn:nth-child(2) {
    background-color: #f1f !important;
}

Note: this code will target both Button Header in Desktop + Mobile

Hi Everyone,

Is there a way to use the same type of child logic to to apply the below code the each individual folder nav title? I want each section to have a different coloured underline on active (folder title only not content), If I was able to achieve it on hover as well then even better...

Currently I have this which does it on all folder titles:

.header-nav-item--active a {
  background-image: none !important;
  border-bottom: 5px solid #20AECF;
  }

.header-nav-folder-content a{
  border-bottom: none;
}

On 6/24/2024 at 3:51 PM, rfung said:

Hi Everyone,

Is there a way to use the same type of child logic to to apply the below code the each individual folder nav title? I want each section to have a different coloured underline on active (folder title only not content), If I was able to achieve it on hover as well then even better...

Currently I have this which does it on all folder titles:

.header-nav-item--active a {
  background-image: none !important;
  border-bottom: 5px solid #20AECF;
  }

.header-nav-folder-content a{
  border-bottom: none;
}

Use something like this

div.header-nav-item:nth-child(3)>a {
     background-image: none !important;
  border-bottom: 5px solid #20AECF !important;
}

Brilliant, this works to have them with an underline permanently. Is there a way to make it only happen on hover and when 'active'?

 

div.header-nav-item:nth-child(1)>a {
     background-image: none !important;
  border-bottom: 5px solid #e94562 !important;
}

div.header-nav-item:nth-child(2)>a {
     background-image: none !important;
  border-bottom: 5px solid #20aecf !important;
}

div.header-nav-item:nth-child(3)>a {
     background-image: none !important;
  border-bottom: 5px solid #fab92c !important;
}

div.header-nav-item:nth-child(4)>a {
     background-image: none !important;
  border-bottom: 5px solid #c9d53c !important;
}

Ah I've got it: 

div.header-nav-item:nth-child(1)>a:hover {
     background-image: none !important;
  border-bottom: 5px solid #e94562 !important;
}

Thank for all your help 🙂

@tuanphan

Sorry, I have changed how I'm achieving the line as it was moving the nav up and down before. Instead I have worked out how to grab and tweak SS standard active underline and tweak it. However I can't work out how to apply child logic to nav links 1 - 4 now, as the code setup is different... any ideas? The below shows how I am currently applying one colour to folder titles both in hover and active state. I would like to change the " background-image: linear-gradient(#e94562, #e94562);"  for the 4 nav titles:

//GRAB SS active underline:

body:not(.header--menu-open) .header-nav-item--active>a {
    background-image: linear-gradient(#e94562, #e94562);
    background-repeat: repeat-x;
    background-size: 1px 3px;
    background-position: 0 100%;
    background-position: 0 calc(100% - 0.1em);
}

//Apply SS underline style on hover:

body:not(.header--menu-open) .header-nav-item>a:hover {
    background-image: linear-gradient(#e94562, #e94562);
    background-repeat: repeat-x;
    background-size: 1px 3px;
    background-position: 0 100%;
    background-position: 0 calc(100% - 0.1em);
}

Any ideas?

Ah this seems to have solved it:


//hover
div.header-nav-item:hover:nth-child(1)>a {
     background-image: linear-gradient(#e94562, #e94562);
    background-repeat: repeat-x;
    background-size: 1px 3px;
    background-position: 0 100%;
    background-position: 0 calc(100% - 0.1em);
}
//active
div.header-nav-item--active:nth-child(1)>a {
     background-image: linear-gradient(#e94562, #e94562);
    background-repeat: repeat-x;
    background-size: 1px 3px;
    background-position: 0 100%;
    background-position: 0 calc(100% - 0.1em);
}