Breadcrumbs: Add Option to Wrap the Breadcrumbs Navigation

Feature Requests / Improvements
1

Hi there,

Working on a WooCommerce template and ran into this issue while using the Breadcrumbs element, basically on smaller screens or when the container width is no longer wide enough to contain the Breadcrumb content, the navigation items start to break the text line (See image below)

Products-Single-Template-
Products-Single-Template-1321×876 92.2 KB

The fix is rather simple, something like this does the job:
.brxe-woocommerce-breadcrumbs .navigation {
flex-wrap: wrap;
}

But I do believe this should be a native option, especially for the users with limited CSS knowledge.

Thanks!

10 Likes
2

Hi!
I made for it more some extra lines, so, if you have very long breadcrumb, in set @media will be scrollable.

I hope it will be help for you and community. :slight_smile:

.brxe-woocommerce-breadcrumbs .navigation {
flex-wrap: wrap;
}

@media (max-width: 1024px) {
.brxe-woocommerce-breadcrumbs .navigation {
overflow-x: auto;
text-align: left;
flex-wrap: nowrap;
white-space: nowrap;
}
}

1 Like