Is there a way to change the color of a letter or symbol in navigation items?

Site URL: https://garlic-vanilla-9jsw.squarespace.com

I'm trying to change the color of the ▮ symbol to the red I'm using on the site, while keeping the rest of the navigation the same color. For example: "▮Nosotros"; red for "▮" and white for "Nosotros"

closest I got was this code, but I could not find a way to determine individual characters:
.header-nav-item a[href="/about"], .header-menu-nav-item a[href="/about"]
 {
    color: #ec8349 !important;
}

Thanks!

Try change your item to this

Quote

<span>▮</span>NOSOTROS

Then let me know. We will give some code to hide <span> & change symbol color

13 hours ago, tuanphan said:

Try change your item to this

Then let me know. We will give some code to hide <span> & change symbol color

Tried it earlier, it shows up as ▮</span>NOSOTROS instead

Try change your item to this

Quote

<span>▮</span>NOSOTROS

Then let me know. We will give some code to hide <span> & change symbol color

13 hours ago, tuanphan said:

Try change your item to this

Then let me know. We will give some code to hide <span> & change symbol color

Done, waiting for your reply. Thanks!

On 6/29/2021 at 4:53 AM, DSGNRAgencia said:

Done, waiting for your reply. Thanks!

It looks like you add a span only

⏹</span>NOSOTROS

You need to add both. It should be

<span>⏹</span>NOSOTROS

9 hours ago, tuanphan said:

It looks like you add a span only

⏹</span>NOSOTROS

You need to add both. It should be

<span>⏹</span>NOSOTROS

 

I did. As I mentioned before, that's how they show up for some reason, I don't understand why

On 7/2/2021 at 12:03 AM, DSGNRAgencia said:

I did. As I mentioned before, that's how they show up for some reason, I don't understand why

Remove span & add this to Design > Custom CSS

/* nav items square */
.header-nav-item a:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: green;
}

16 hours ago, tuanphan said:

Remove span & add this to Design > Custom CSS

/* nav items square */
.header-nav-item a:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: green;
}

 

That did it. Is there a way to do this for the mobile navigation menu? it would be last wrinkle. Thanks, you're a lifesaver!

On 7/4/2021 at 5:35 AM, DSGNRAgencia said:

That did it. Is there a way to do this for the mobile navigation menu? it would be last wrinkle. Thanks, you're a lifesaver!

With mobile, use this code

div.header-menu-nav-item a:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #791726;
}

8 hours ago, tuanphan said:

With mobile, use this code

div.header-menu-nav-item a:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #791726;
}

 

It worked, and this is gonna help on other sections as well. Thank you!

On 7/5/2021 at 11:58 PM, DSGNRAgencia said:

It worked, and this is gonna help on other sections as well. Thank you!

Hi. Do you need help on these?

Site URL – https://garlic-vanilla-9jsw.squarespace.com/

1. (Desktop/Mobile – Areas) Scroll bar at the bottom of page.

https://garlic-vanilla-9jsw.squarespace.com/areas

2. (Mobile – Footer) Increase space between lines?

https://garlic-vanilla-9jsw.squarespace.com/

3. (Tablet – Innicio) Increase space between reconocimientos and horizontal line above?

https://garlic-vanilla-9jsw.squarespace.com/

4. (Tablet – Menu) Social icon not  aligned with the menu items above.

https://garlic-vanilla-9jsw.squarespace.com/

5. (Tablet – Areas) The text and image are quite small in width and are skewed to the left of the page.

https://garlic-vanilla-9jsw.squarespace.com/areas

6. (All devices – Equipo) Scroll bar at the bottom of page.

https://garlic-vanilla-9jsw.squarespace.com/equipo