How can I change the nav bar separator colour individually (in theme 7.1)?

Hi,

Can someone help me? I am trying to change the individual dotes/separators to have different colors in the nav bar.

I've attached a screenshot of what it currently looks like.

All the dotes are red at the moment, I want them to be red, blue, and yellow, so it's alternating.

Current Code:

/* add dotes on menu bar */

.header-nav-item a:after {

  content: " • ";
  color: #EB212B !important;
  }

.header-nav-item:last-child a:after {
  
  content: '';

  }

16 hours ago, El04 said:

Hi,

Can someone help me? I am trying to change the individual dotes/separators to have different colors in the nav bar.

I've attached a screenshot of what it currently looks like.

All the dotes are red at the moment, I want them to be red, blue, and yellow, so it's alternating.

 

Current Code:

/* add dotes on menu bar */

.header-nav-item a:after {

  content: " • ";
  color: #EB212B !important;
  }

.header-nav-item:last-child a:after {
  
  content: '';

  }

Can you share the website URL?

Hi,

Yes its - guitar-ruby-k9mb.squarespace.com

Pass - Batman2024@

I would also like to replicate this for the footer nav bar links, please.

Thank you

On 2/9/2024 at 11:27 PM, El04 said:

Hi,

 

Yes its - guitar-ruby-k9mb.squarespace.com

Pass - Batman2024@

I would also like to replicate this for the footer nav bar links, please.

Thank you

Use CSS code like this

nav>div:nth-child(1) a:after {
    color: #f1f !important;
}
nav>div:nth-child(2) a:after {
    color: #fff !important;
}
nav>div:nth-child(3) a:after {
    color: red !important;
}
nav>div:nth-child(4) a:after {
    color: blue !important;
}

Thank you so much, this is perfect.