Mobile: How to show all Categories in my store?

Hello,

My store has several categories in my store, but on mobile it only looks like I have 4 categories because the scroll isn't obvious.

How can I show all the categories at once/remove the need to scroll? I would like to keep the pipe divider ( | ) between categories.

Site: https://www.dethreads.net

TIA!

That worked! Absolute lifesaver! Thank you @Lesum!

Hi @Lesum quick follow-up question. It appears the spacing of the pipe dividers shifted a little. Is there any way to align space out the divider evenly like in my first screenshot? This is how it appears now:

Nevermind, I changed "margin-left" to "margin-center" and it worked 🙂

@cinnamoncat Awesome! You can add this code to make make sure all the row start in the same position. 

@media only screen and (max-width: 575px) {
	a.nested-category-breadcrumb-link:first-child {
		margin-left: 1.5vw !important;
	}
}

22 minutes ago, cinnamoncat said:

Nevermind, I changed "margin-left" to "margin-center" and it worked 🙂

"margin-center" is a syntax error (there's no such thing as margin-center in CSS code).

Change it to margin-left: 1.5vw !important;

That worked as well, thank you!

One more question...is there any way to wrap the text so there isn't a line break between 'athleisure' and 'children's clothing & accessories' categories like seen in the editor?

@cinnamoncat "Children's Clothing & Accessories" doesn't have enough space to fit in the same line. We have two options to fix the issue.

First option is to add the code below to swap the position of "Athleisure" with "Children's Clothing & Accessories"

@media screen and (max-width: 575px)
li.nested-category-breadcrumb-list-item:nth-child(4) {
    order: 3 !important;
}

The second option is to reduce the margin next to each category with the code below:

@media only screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
    	margin-left: 1vw !important;
		margin-right: 1vw !important;
	}
}

You can add any of the code blocks to see which one you think works best.

Thank you!