Left align breadcrumbs in header callout

Shapely
1

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?)

www.nsclassis.org/our-churches

Thanks!

2

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%;
}

Thanks!
Colorlib Support Team

3

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”?

4

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;
}

5

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

6

Nice :slight_smile:

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