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

Technical Q&A
1

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
Screenshot 2019-12-17 at 22.05.27.png2758×1402 686 KB

Thanks so much !!

2

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 “SALE”.
  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

3 Likes
3

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).

1 Like
4

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?

1 Like
5

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

1 Like
6

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
7

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
8

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

9

It sure does :))

10

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

1 Like
11

This doesn’t work for me! I am using Debut theme, I added your css code to the end of theme.scss.liquid file and saved asset. Ideas?

Thanks

12

Could you share the url of your store so that I can take a quick look?

Regards,

Tom

13

it’s www.oily.cl, I have a pending SSL at the moment since I just updated the domain.

Thanks

14

Hi,

It looks as though your menus have different ids. Try the following:

ul#SiteNav,
ul#MobileNav {
  li:first-of-type a {
    color: red;
  }
}

Regards,

Tom

15

Bo - this has worked amazing for the desktop view on my store (Testament theme) but the html shows in the mobile menu instead of bolding! Any idea how to fix that?

16

Hi Bo,

I tried it with minimal theme, but it didn’t work. Could you please give me some suggestion? Thanks

17

@Bo I’m not able to acheive this in my prestige theme

Could you help me with this ?

It worked like a charm in my Flex theme though !

18

Hey there, @Gourav07

As this is a third party theme I would not be the best equipped to advise you on editing the code, however, you can find support for your theme by going to your theme customizer > Theme Settings and scrolling to the bottom to find Get Support.

All the Best,

Bo

19

This does work on the Desktop version but shows code on the mobile version? is there any way to fix this?

many thanks

faddy