Anyone know how to change the colour of one title 'SALE' to red in the menu bar (Testament Theme) ??

Solved
Highlighted
Excursionist
22 1 2

Anyone know how to change the colour of one title 'SALE' to red in the menu bar (Testament Theme) ??

I've been scouring chat rooms, but can't seem to find the right code. Here's an image...

Screenshot 2019-12-17 at 22.05.27.png

Thanks so much !!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1200 118 304

This is an accepted solution.

Hey there, @sonyarothwell 

 

Bo here from Shopify Support! 

 

As this is a third party theme I would not be the best equipped to advise you on editing the code, however, there is a hack that works with a lot of themes built for Shopify that does not require editing the theme of the code itself. Instead, we are going to add some formatting to the item name, in this case, sale, right in the navigation settings. 

 

  1. Go to Online Store > Navigation > the menu you want to edit. This will most likely be your main menu.
  2. Click "Edit" beside "SALE".
  3. Change the name of this item from "SALE" to "<span style="color: red">SALE</style>".
  4. Click Save. 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

2 Likes
Highlighted

This is an accepted solution.

Hi Sonya,

 

If you are at all familiar with editing your site's css this should not be difficult. Just follow the step-by-step instructions below:

 

  1. In your store admin, select 'Online Store' then 'Themes' from the panel on the left.
  2. On the themes page, in the 'Actions' dropdown beside your current theme, select 'Edit code'.
  3. In the list of files on the left, select the file named 'theme.scss.liquid' (it will be under 'Assets').
  4. In the editor on the right, scroll all the way to the bottom of the theme.scss.liquid file and add the following code before saving the file:
ul#main-nav,
ul.dl-menu {
  li:first-of-type a {
    color: red;
  }
}
  

The above code assumes that the item you want to be red is the first item in the menu. It will work for the desktop view and the mobile view.

 

Enjoy!

 

Edit: Just saw Bo's suggestion above. I think you'll find that preferable as it allows you to place the 'Sale' item anywhere in the menu (and also doesn't involve editing your site files).

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like
Highlighted

This is an accepted solution.

Bo,

 

I was surprised to see your answer, as it's an approach I wouldn't have thought of. I tried it out in my own store (accounting for the span/style typo in the closing tag) and no dice. Can you confirm that it works?

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like
Highlighted
Shopify Staff
Shopify Staff
1200 118 304

This is an accepted solution.

Hey, @LittleVentures 

 

Fair question - it can be hit and miss. It works on some themes but not all. You can check it out live on this test store which is using Narrative. Here is a screenshot of the navigation for that test store. 

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Highlighted
Excursionist
22 1 2

THANK YOU SO MUCH BO !!!

You are amazing ! This has really really made my day :)))

Presumably, I can make type bold and italic like this in any headers ?

MAERRY CHRISTMAS !

Warmest regards,

Sonya

1 Like
Highlighted
Excursionist
22 1 2

THANK YOU SO MUCH BO !!!

You are amazing ! This has really really made my day :)))

Presumably, I can make type bold and italic like this in any headers ?

MERRY CHRISTMAS !

Warmest regards,

Sonya

1 Like
Highlighted
Excursionist
22 1 2

THANK YOU SO MUCH Little Ventures for taking the time to reply !! I've kept a note of this code. You're right, Bo's so solution is very simple and worked a treat. MERRY MERRY CHRISTMAS !!

Warmest regards,

Sonya

0 Likes
Highlighted
Excursionist
22 1 2

It sure does :))

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1200 118 304

Great question! You can indeed make the text bold and italic. You can do so by adding the bold and italic brackets to the sequence. It will look like this: 

<span style="color: red"><i><b>SALE</i></b></style>

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

1 Like