Mobile View Breadcrumbs Categories in Line on Every Page

Hi all,

I am wondering if this possible to make categories list aligned on top on each category page, same as on the main page where "Shop A'll" - in Mobile view. 

The website is not published yet. Orange square is the way it is, and green square is desired outcome. It is not necessary to be exactly this way, but the idea is to have the raw with categories under each category, to make customers switch between categories without coming back to "shop all"

@tuanphan would you be able to make suggestions?

I found this code, just like I wanted. But I would like to fix it a little:

- "All" seems to be a little bit higher than the rest of categories

- Distance between main category that displayed on top and the raw of categories is very big, I would like to make it shorter and make it even with distance to products if possible (not necessary).

- If this possible I would also add "|" between categories to make it look like this:

All | Necklaces | Earrings | Bracelets | 

Thanks!!!!

 

Here is the code that I used:

 

/* Show category nav links */

@media screen and (max-width:767px) {

div.nested-category-tree-wrapper {

    display: flex !important;

    float: none !important;

    min-width: 100% !important;

    max-width: 100% !important;

    margin-right: 0 !important;

}

section.products.collection-content-wrapper.products-list {

    flex-direction: column !important;

    display: flex;

}

.nested-category-tree-wrapper>ul {padding-top: 44px;padding-bottom: 30px;margin-bottom: 0;flex-wrap: nowrap;overflow-x: scroll;text-align: center;display: flex;flex-direction: row;align-content: center;position: relative;justify-content: start;}

.nested-category-tree-wrapper>ul li {

    margin-left: 2vw;

    flex: 0 0 auto;

}

nav.nested-category-breadcrumb {

    display: none !important;

}

ul.nested-category-children {

    display: none !important;

}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {

    padding-top: 5px;

}

}

 

 

 

Edited September 10 by Elena_N

Hi,

What is shop page url? We can check easier