Denzel Chia
    Moderator
    Posts: 2672
    March 29, 2016 at 1:37 am #25995

    Hi,

    Try using the following custom css.

    .breadcrumbs {
    left: -14% !important;
    position: absolute;
    top: 25px !important;
    }

    Thank you

    JS
    Spectator
    Posts: 27
    April 8, 2016 at 3:20 pm #26006

    Hello, thanks for the Custom CSS. This is close, but not quite correct. When navigating to Shop->Professional Brands then selecting a brand, the breadcrumbs align differently on the left side of the title bar depending on which brand is chosen. It seems the left alignment is not set to a fixed position.

    Is there another Custom CSS that might work?

    Thank you.

    Website: https://cascadeintegrativepharmacyofseattle.com/

    Denzel Chia
    Moderator
    Posts: 2672
    April 9, 2016 at 6:06 am #26380

    Hi,

    Please try the following.

    .tax-product_cat .page-title-captions {
    display: none !important;
    }
    .tax-product_cat .breadcrumbs {
    left: 20px !important;
    position: relative;
    text-align: left !important;
    }

    Thank you

    JS
    Spectator
    Posts: 27
    April 9, 2016 at 4:07 pm #26389

    Hello, thank you for this. This works perfectly except on the individual product pages which still display the breadcrumbs on the right-hand side.

    This is a step closer, but still not quite correct.

    Is there a different Custom CSS that I can try?

    Thank you for all your help 🙂

    Denzel Chia
    Moderator
    Posts: 2672
    April 10, 2016 at 7:20 am #26399

    Hi,

    For single product.
    Use the same css code, but change the preceding class name.

    .single-product .page-title-captions {
    display: none !important;
    }
    .single-product .breadcrumbs {
    left: 20px !important;
    position: relative;
    text-align: left !important;
    }

    Thank you

    Denzel Chia
    Moderator
    Posts: 2672
    April 10, 2016 at 7:22 am #26400

    If you want all breadcrumb for all pages to go left.

    .page-title-captions {
    display: none !important;
    }
    .breadcrumbs {
    left: 20px !important;
    position: relative;
    text-align: left !important;
    }

    Thank you