Left align breadcrumbs in header callout

I’ve enabled breadcrumbs using YoastSEO. I’ve also hidden the page title from the header callout using a custom CSS override. How can I reposition the breadcrumb trail so that it is left aligned in the first bootstrap column? (Currently it appears to be left aligned in the second or third column?)



hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

.page-title-section .col-md-6 {
width: 100%;

Colorlib Support Team

Thank you, that worked perfectly for desktop! Mobile still renders in the original place, however.

Would I add the same CSS but use “.col-sm-6” and/or use “.col-xs-12”?

Good evening

Lets modify your css to this:

.page-title-section .col-md-6, .page-title-section .col-md-6 #breadcrumbs {
width: 100%;
text-align: left;

Yes, that’s perfect. Thank you so much!

Nice :slight_smile:

will close this case now, Feel free to contact us again if you have other questions