Solved

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

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

Accepted Solutions (4)

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

LittleVentures
Shopify Partner
45 10 8

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

View solution in original post

LittleVentures
Shopify Partner
45 10 8

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

View solution in original post

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 18 (18)

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

sonyarothwell
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

sonyarothwell
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

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

jennagreeley
Visitor
1 0 0

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
Excursionist
12 0 7

@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
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

faddy19
Visitor
1 0 0

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
Shopify Partner
45 10 8

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
LittleVentures
Shopify Partner
45 10 8

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
Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

jckacova
Excursionist
29 0 5

Hi Bo,

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

 

 

sonyarothwell
Excursionist
22 1 2

It sure does :))

sonyarothwell
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

oilychile
Excursionist
23 0 8

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
Shopify Partner
45 10 8

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

 

Regards,

Tom

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
oilychile
Excursionist
23 0 8

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

Thanks

LittleVentures
Shopify Partner
45 10 8

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

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