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

[sonyarothwell]

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

Thanks so much !!

[Bo · 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

[LittleVentures · 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).

[LittleVentures · 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?

[Bo · 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

[sonyarothwell · Accepted solution]

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

[Bo · 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

[sonyarothwell]

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

[sonyarothwell · Accepted solution]

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

[Bo · Accepted solution]

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

[jennagreeley]

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?

[Gourav07]

@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 !

[Bo]

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

[faddy19]

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

many thanks

faddy

[LittleVentures · 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).

[LittleVentures · 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?

[Bo · 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

[jckacova]

Hi Bo,

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

[sonyarothwell]

It sure does :))

[sonyarothwell]

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

[oilychile]

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

[LittleVentures]

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

Regards,

Tom

[oilychile]

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

Thanks

[LittleVentures]

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