Responsive breadcrumbs

[bracas]

Just found out that breadcrumbs on my site wrap on top of each other since there s not enough space on smaller mobile devices.

How could I fix this? I’ve already changed space and font-size, but that comes to an end if you want the user to be able to see it.

My thought was to only display 2-3 steps back like:
Default Home > Category > Sub category > Product
Category > Sub category > Product
Sub category > Product

I still want the schema breadcrumbs to be correct but might be possible to fix this responsive fix somehow or how do other sites solve this? I can’t be the first one with this issue.

Thanks in advance

[christopher]

Hi there,

Actually, the issue comes from the Bar height. The Bar which contains the breadcrumbs and has the black background is set to have 2em height.

You simply can remove the height option from there and let the breadcrumbs stack and the black section will expand accordingly.

There is no other way to address long breadcrumbs in mobile, they should stack as there is not enough space.

Thank you.

[bracas]

Solved it with a scroll function. But how do I make the scrollbar visible on IOS devices that use Safari?

Either do my CSS fixes apply for firefox? Cleared all cache and minfy.

[ruenel]

Hey There,

Thanks for updating in! Regretfully none of the custom css will make the scrollbar always visible in iOS devices. Generally the code to be use is this:

body .x-crumbs-list {
    overflow-x: auto;
}

It seems it does not work. It may not be possible.