Breadcrumbs are not displayed in the mobile version

[Sebastian42]

With my theme, the breadcrumbs are only displayed on the desktop view. Do you have any idea what I need to change in the code to make it display on the mobile view as well? My Website is called https://footpieces.de/

[Stan_Uvidest]

Hi!
You should double check if there is a setting to show breadcrumbs on mobile version.

If there is no setting, you can make a copy of a theme ( just to keep it as a backup ).
And then add to your theme.css file this:

@media screen and (max-width: 640px) {
.page__sub-header{
display: flex;
margin: 20px 0 0 20px;
}
}

[Sebastian42]

Your solution worked, thank you very much :) Do you perhaps have a solution for displaying Home/Collection/Product or Home/Collection/Collection/Product? Currently, only Home/Collection or Home/Product is displayed. My current code:

<section data-section-id="{{ section.id }}" data-section-type="product" data-section-settings="{{ section_settings | escape_once }}">
<div class="container container--flush">
<div class="page__sub-header">
<style>
.breadcrumbs {
margin: 0 0 0.8em;
}

.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
}

.breadcrumbs__item {
display: inline-block;
}

.breadcrumbs__item:not(:last-child):after {
content: '/';
margin: 0 0.1em;
color: #000;
}

.breadcrumbs__link {
text-decoration: underline;
}

.breadcrumbs__link[aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}

.breadcrumbs__link[aria-current="page"]:hover,
.breadcrumbs__link[aria-current="page"]:focus {
text-decoration: underline;
}
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="/">Home</a>
</li>
{%- case t -%}
{%- when 'page' -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
</li>
{%- when 'product' -%}
{%- if collection.url -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
{%- endif -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ product.url | within: collection }}" aria-current="page">{{ product.title }}</a>
</li>
{%- when 'collection' and collection.handle -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ collection.title | link_to: collection.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
</li>
{%- endif -%}
{%- when 'blog' -%}
{%- if current_tags -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
{%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
<a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
</li>
{%- endif -%}
{%- when 'article' -%}
<li class="breadcrumbs__item">
{{ blog.title | link_to: blog.url }}
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
</li>
{%- else -%}
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
</li>
{%- endcase -%}
</ol>

[websensepro · Accepted solution]

Hi @Sebastian42 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 640px) {
    .page__sub-header {
        justify-content: space-between;
        align-items: center;
        display: flex;
    }
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[Sebastian42]

Thank you! I have another problem: When I click on Collection and then Product, my breadcrumbs look like this: Home/ Product, but they should be displayed as Home/Collection/Product.  How do I solve this?

[SEOAnt-Jeffery]

Hi @Sebastian42

Let me share with you another proposal concerning your request of making breadcrumbs display on mobile port:

You can use the below CSS to test on store and see if works or not:

@media screen and (max-width:767px) {
.ProductItem-nav .ProductItem-nav-breadcrumb, .ProductItem-nav {
    display: flex !important;
}
.hidden-sm-down {
    display: block !important;
    width: 100% !important;
}
}

Just a quick note about mobile breadcrumbs—to keep them user-friendly, it is recommended to ensure they stay within a single line. When breadcrumbs wrap to two or more lines, the trail can become harder to follow, which might reduce clarity for users. If the breadcrumb trail feels too long on smaller screens, shortening it to show only the immediate previous page is a great space-saving option. While this approach prioritizes simplicity and screen efficiency, it does mean users won’t be able to jump back multiple steps or see their full navigation path. In this case, the breadcrumb acts more like a "back" button and may limit context about the user’s location in the app or site hierarchy.

I hope my idea shared here can be beneficial to your question. Thank you!

[Sebastian42]

Your solution worked, thank you very much :) Do you perhaps have a solution for displaying Home/Collection/Product or Home/Collection/Collection/Product? Currently, only Home/Collection or Home/Product is displayed.