Making Breadcrumbs Slideable on Mobile Devices

Store Design
, , ,
1

Hello Shopify Community,

I’m currently working on improving the breadcrumbs functionality on my store, specifically for mobile users. When a customer navigates to deeper levels of categories (e.g., the fourth category or beyond), the mobile screen is unable to display all breadcrumb categories in a single line. As a result, the breadcrumbs wrap onto two lines, which doesn’t look as professional as I would like.

I am looking for a solution to keep the breadcrumbs in a single line and make them horizontally scrollable or slideable on mobile devices. This way, users can easily scroll through the breadcrumb trail without the design breaking into multiple lines.

Any guidance or suggestions on how to implement this would be greatly appreciated!

Thank you in advance for your help.

Best regards,
Mudassir Mehmood

My store

WhatsApp Image 2024-10-17 at 9.35.12 AM.jpeg
WhatsApp Image 2024-10-17 at 9.35.12 AM.jpeg720×1600 88.9 KB

2

Hi @MudassirMehmood ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
@media(max-width: 749px){
  .breadcrumbs__list {
    display: flex;
    overflow-y: scroll;
    white-space: nowrap;
    margin-left: 10px !important;
  }
}
3

Please remove this line

WhatsApp Image 2024-10-17 at 10.27.53 AM.jpeg
WhatsApp Image 2024-10-17 at 10.27.53 AM.jpeg720×1600 76 KB

4

Hi,

You can use code below to replace old code

@media(max-width: 749px){
  .breadcrumbs__list {
    display: flex;
    overflow-y: scroll;
    white-space: nowrap;
    margin-left: 10px !important;
    scrollbar-color: #fff #fff;
  }
}
5

My Dear,
Thank you so much, It is working good