Return to previous page

Yoast Woocommerce Breadcrumbs change style style

This topic has 9 replies, 3 voices, and was last updated 2 years, 5 months ago ago by Olga Barlow

Aoleta

Participant

May 26, 2022 at 11:58

Incorrect display of breadcrumbs (see image below)
Please give the code to replace the div wrapper for each link or provide the css code.
Thank you.

now the style looks like this https://ibb.co/59PndJk

div style https://ibb.co/59PndJk

#324632 Copied Theme version: 8.1.6

8 Answers

Olga Barlow

Support staff

May 26, 2022 at 15:47

Hello,

Provide us with WP Dashboard and FTP access to your site, please. We’ll check the issue in more detail.

Regards

#324658 Copied

Aoleta

Participant

May 27, 2022 at 10:27

granted the necessary access

#324710 Copied

Olga Barlow

Support staff

May 27, 2022 at 12:10

Hello,

Thank you. I have passed your issue to our developers. I’ll inform you once they fix the problem.

Regards

#324721 Copied

Rose Tyler

Support staff

May 28, 2022 at 08:38

Hello,

Try to add the next code in Theme Options > Theme custom CSS:

.breadcrumb-trail .back-history {
position: absolute;
right: 0;
}
.breadcrumb-trail .back-history:before {
content: '\e902';
font-family: xstore-icons;
position: absolute;
left: -2px;
top: 50%;
-webkit-transform: translate(-100%,-50%);
transform: translate(-100%,-50%);
}
.breadcrumb-trail .page-heading .container {
padding-right: 200px;
line-height: 3ex;
height: 3ex;
overflow: hidden;
text-align: left;}
.breadcrumb-trail .page-heading .container div {
display: inline;
position: static;
}
.breadcrumb-trail {
padding-left: 15px;
padding-right: 15px;
}

Regards

#324761 Copied

Aoleta

Participant

May 28, 2022 at 10:24

mobile view

Thank you!
When viewed on a computer, everything got better and became as it should.
Please write more css code for mobile computers, because links in breadcrumbs are cut off (in the screenshot I showed that the page has two words, and in breadcrumbs after the word “shop” everything else is cut off.
Thank you.

https://ibb.co/d2kSvCV

#324767 Copied

Rose Tyler

Support staff

May 28, 2022 at 11:28

Hello,

Change the previous code to:

.breadcrumb-trail .back-history {
    display: block;
    margin-bottom: 15px;
}
@media screen and (min-width: 768px){
    .breadcrumb-trail .back-history {
        position: absolute;
        right: 0;
    }
    .breadcrumb-trail .back-history:before {
        content: '\e902';
        font-family: xstore-icons;
        position: absolute;
        left: -2px;
        top: 50%;
        -webkit-transform: translate(-100%,-50%);
        transform: translate(-100%,-50%);
    }
    .breadcrumb-trail .page-heading .container {
        padding-right: 200px;
        line-height: 3ex;
        height: 3ex;
        overflow: hidden;
        text-align: left;
    }
    .breadcrumb-trail .page-heading .container div {
        display: inline;
        position: static;
    }
    .breadcrumb-trail {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (min-width: 650px) and (max-width: 992px) {
    h1.page-title {
        height: 170px !important;
    }
}
@media screen and (max-width: 649px) {
    h1.page-title {
        height: 180px !important;
        width: 100%;
        font-size: 24px !important;
    }
    .header-bottom {
        margin-bottom: 50px;
    }
}

Regards

#324769 Copied

Aoleta

Participant

May 30, 2022 at 12:22

Thank you Olga 🙂

We can mark the topic as solved

#324817 Copied

Olga Barlow

Support staff

May 30, 2022 at 16:08

Hello,

You are welcome.

Regards

#324834 Copied

Tagged: breadcrumbs, change, style, templates, woocommerce, wordpress, yoast
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Yoast Woocommerce Breadcrumbs change style style’' has been successfully resolved, and the topic is now closed for further responses

Yoast Woocommerce Breadcrumbs change style style

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection