Pipeline Theme change Color of a navigation menu item

Store Design
, , ,
1

Hi! I am setting up my website for the Holidays and I am making one of my navigation manu items “The Holiday Collection”. Underneath that I have “Cozy Favorites”, “Festive Accessories” “Pajamas & Lounge” “Holiday Travel” and “Gift Cards”. I want the text for all of these menu items to be in red, #C70000. I want everything else to stay the normal color. This is for the Pipeline theme by Groupthought (latest version)

Does anyone know what custom code I would need to do this?

Thank you!

1 Like
2

Hi @lucymaloney

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hey @lucymaloney

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

4

Hi! www.saracampbell.com and it doesn’t have a password. Thank you!

5

Thanks for the info, but where can I find this Holiday collection menu?

Made4uoRibe_0-1698777804795.png
Made4uoRibe_0-1698777804795.png465×465 16.7 KB

Made4uoRibe_1-1698777822285.png
Made4uoRibe_1-1698777822285.png883×298 38.4 KB

Thanks!

6

Please take a look now. The published theme yesterday didn’t have the Holiday Collection because it just went live today, 11/1. See the screenshot below. I would like “The Holiday Gift Guide” and everything that falls under it to be red. Thank you!

lucymaloney_0-1698850282321.png
lucymaloney_0-1698850282321.png959×380 30.9 KB

1 Like
7

Oh, That what im thinking also.

Do you mean liek this right?

Made4uoRibe_0-1698855717555.png
Made4uoRibe_0-1698855717555.png367×291 9.86 KB

If it is, Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#dropdown-e7db8122cfd6ead68e07ac0921c7866e > div > div > div:nth-child(3) > a:nth-child(2) > span,
#dropdown-e7db8122cfd6ead68e07ac0921c7866e > div > div > div:nth-child(3) > a:nth-child(3) > span,
#dropdown-e7db8122cfd6ead68e07ac0921c7866e > div > div > div:nth-child(3) > a:nth-child(4) > span,
#dropdown-e7db8122cfd6ead68e07ac0921c7866e > div > div > div:nth-child(3) > a:nth-child(5) > span,
#dropdown-e7db8122cfd6ead68e07ac0921c7866e > div > div > div:nth-child(3) > a:nth-child(6) > span
{
     color: red !important;
}
  • And Save.
  • Note: You can change the color you like.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

2 Likes
8

this worked perfectly…Thank you so much!!