Jump to content

Mobile View Breadcrumbs Categories in Line on Every Page

Recommended Posts

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"



Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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



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 by Elena_N
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.