Return to previous page

Breadcumb in only one line at xstore elementor

This topic has 9 replies, 3 voices, and was last updated 2 months ago ago by Luca Rossi

Javito

Participant

October 8, 2024 at 16:17

Hi,

I want the breadcrumb in a single line and aligned to the center, how can i do this? (i’ve attached screenshot)

Also how can i edit category breadcumbs that i don’t remember where to do this? (i’ve attached screenshot)

Best regards

Files is visible for topic creator and
support staff only.

#417842 Copied Theme version: 9.4.1

8 Answers
Rose Tyler

Support staff

October 9, 2024 at 10:14
Hello, Javito,

Thank you for reaching out to us with your queries.

Custom CSS code can be used:
```
.page-heading .title {
    display: inline-flex;
}
.single-product .page-heading .title:before {
    content: "\e904";
    font-family: 'xstore-icons';
    padding-right: 5px;
}
```
Best Regards,
8Theme’s Team
#417944 Copied
Javito

Participant

October 16, 2024 at 18:05

Hi thank you, it worked!

what can i do if you want also to apply this in the whole site
I have other pages like that i would like to do the same:

https://calzadoskamet.com.ar/nosotros/
https://calzadoskamet.com.ar/contacto/

Can i put a general code that apply for the whole site or it must be different codes for the rest of pages that have breadcumbs?

Best regards.

#419008 Copied

Javito

Participant

October 16, 2024 at 18:37

To be more specific,

These breadcumbs are OK:

– Breadcumb individual pages its OK (I put with your code in one line and edit padding with xstore builders > elementor)
ex: https://calzadoskamet.com.ar/producto/zapatilla-gravity-one/

– Breadcumb product page its OK (I put with your code in one line and edit padding with xstore builders > elementor)
ex: https://calzadoskamet.com.ar/productos/

These breadcumbs are WRONG :

– Breadcumb other pages are wrong (there is no option via elementor and in personalized section is not working). maybe custom css can be added but will affect the breadumbs that are OK mentioned above
ex: https://calzadoskamet.com.ar/contacto/

– Breadcumb category pages are wrong (there is no option via elementor and in personalized section is not working). maybe custom css can be added but will affect the breadumbs that are OK mentioned above
ex: https://calzadoskamet.com.ar/categoria-producto/gravity/

Best regards

#419009 Copied
Luca Rossi

Support staff

October 17, 2024 at 11:36
Hi @Javito,

Can you please also add this custom CSS code?
```
.page-heading .col-md-12.a-center {
    display: flex;
    justify-content: center;
}

.page-heading .col-md-12.a-center .breadcrumbs {
    width: auto;
}
```
https://prnt.sc/kghZ-AmJEmYP

Let us know how it goes!
#419142 Copied
Javito

Participant

October 17, 2024 at 19:28

Thanks!

Lastly what i don’t see is where to change padding and change font size of second word of breadcumb

Ex: https://calzadoskamet.com.ar/nosotros/ – here i’m trying to reduce font size of word “Nosotros”

Another Ex: https://calzadoskamet.com.ar/categoria-producto/gravity/ – – here i’m trying to reduce font size of word “Gravity”

I’ve tried with your custom options but didn’t work.

Can you help me with this? I’ve attached screenshots.

Best regards.

Files is visible for topic creator and
support staff only.

#419256 Copied
Luca Rossi

Support staff

October 18, 2024 at 05:53
Hi @Javito,

We’ve combined all the custom CSS codes into one for you. Just delete the previous custom CSS codes and add this one instead:
```
body .page-heading .title {
    display: inline-flex;
    font-size: 20px !important;
}
.single-product .page-heading .title::before {
    content: "\e904";
    font-family: 'xstore-icons';
    padding-right: 5px;
}

.page-heading .col-md-12.a-center,
.page-heading .col-md-12.a-center .woocommerce-breadcrumb{
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-heading .col-md-12.a-center .breadcrumbs {
    width: auto;
}
```
– https://prnt.sc/4UzxyYvweGJV
– https://prnt.sc/w-iXnlBOiBdl
– https://prnt.sc/DDXQOnaxWzlb

Hope it helps!
#419291 Copied
Javito

Participant

October 18, 2024 at 23:38

Hi,

You are beautiful, i’ve resolved breadcumb padding of category pages and other pages like about us, contact with css also because i don’t see where to change them, if you know let me know please if it’s only with css now it’s OK!

best regards and have a nice weekend

#419463 Copied

Luca Rossi

Support staff

October 19, 2024 at 08:09

Hi @Javito,

Currently, to customize that breadcrumb we can only use the custom CSS codes.

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#419487 Copied
Tagged: improved website navigation, one line breadcrumb, optimized breadcrumbs, seo friendly, website structure, woocommerce wordpress templates, xstore elementor
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Breadcumb in only one line at xstore elementor’' has been successfully resolved, and the topic is now closed for further responses

Breadcumb in only one line at xstore elementor

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection