How to change breadcrumbs to sentence case

[carla_5]

Hi there

I am using Dawn Theme. I would like to change my breadcrumbs to be in sentence case.

Can someone please assist me. Find attached what it currently looks like.

Thanks

 

[sahilsharma9515]

Hi @carla_5 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Also did you want to change the font of the breadcrumb as same as the Sentence? Hopefully I understand your question if not then can you please explain your requirement?

Best regards

Sahil

[carla_5]

Hi there, thank you for reply. 

I am looking to change the breadcrumbs on my page to just sentence case. I will attach 2 pictures, one how my page is curently looking, and the second one how I want it to look, for clarity 🙂

This is what it looks like, uppercase and sentence case mixed.

 

This is How I want it to look like - Only Sentence Case

 

[sahilsharma9515]

Hi @carla_5 Got it, understood your point, Can you now please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best Regards

Sahil

[carla_5]

Yes sure, thank you so much 🙂

Password: saipru

URL: https://9a0bad-3.myshopify.com/

[sahilsharma9515]

Hi @carla_5 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

span.breadcrumb-delimeter {
    font-size: 10px !important;
}
.breadcrumb-delimeter:not(:last-child):after {
    font-size: unset !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
6. You can add the above code at the bottom of the file.

Result:

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[carla_5]

Thank you so much. It looks better now. However, is it also possible for the words to be in the same letter case? For example, mine looks like this: Home / SHOP / BY PRODUCT / Leggings.

I would like it to look like this: Home / Shop / By Product / Leggings

[sahilsharma9515 · Accepted solution]

Hi @carla_5 The way you have mentioned is little complicated and you need to add more custom code for that. instead you can use this.

Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.page-width.breadcrumbs>a {
    text-transform: lowercase;
}

If you want all of it to be in Capital Letter then add this code:

.page-width.breadcrumbs>a{
    text-transform: uppercase !important;
}

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[carla_5]

Hi there thank you so much for the above, will this code work if I change the text-transform to capitalize?  So that I can make the first character of a string capitalized and converts the remaining characters to lowercase?

[sahilsharma9515]

Hi @carla_5 you can try but it will not work, as mentioned it need little complex coding to accomplish this and I will need to look into your theme code to provide you the exact solution.

There is a workaround if you are good to go with that, I have just looked your site and you have already figured the workaround that I am suppose to suggest you, great.

Hopefully I was able to help you, If yes then Please don't forget hit Like and Mark it as solution!, So that if some other person have the same issue then this post will help them.

Best Regards

Sahil