How do I change my category menu to show fully on mobile instead of a scrolling across bar?

On desktop my shop categories show fully, on mobile you can only see three categories and have to scroll across to view the rest. Plus there is no scrolling bar so at first I thought it just wasn't showing them but realised you could scroll across.

Is there any way to make this menu into a drop down for mobile?

Hi. Can you share link to category page? We can help easier

15 hours ago, charplo said:

On desktop my shop categories show fully, on mobile you can only see three categories and have to scroll across to view the rest. Plus there is no scrolling bar so at first I thought it just wasn't showing them but realised you could scroll across.

Is there any way to make this menu into a drop down for mobile?

turning to dropdown may require custom js, if you looking for pure css solution, try this in Design->custom CSS

@media screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
        overflow-x: hidden;
        flex-wrap: wrap;
        justify-content: center;
    }
}

4 hours ago, bangank36 said:

turning to dropdown may require custom js, if you looking for pure css solution, try this in Design->custom CSS

@media screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
        overflow-x: hidden;
        flex-wrap: wrap;
        justify-content: center;
    }
}

Thank you so much this worked perfectly!!!!!! 

12 hours ago, tuanphan said:

Hi. Can you share link to category page? We can help easier

Thank you for your response, the code given below has worked to be able to see the whole menu so that will do for now! 🙂 

On 1/7/2021 at 2:03 AM, bangank36 said:

turning to dropdown may require custom js, if you looking for pure css solution, try this in Design->custom CSS

@media screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
        overflow-x: hidden;
        flex-wrap: wrap;
        justify-content: center;
    }
}

This worked perfectly, thank you SO MUCH! 

I have a similar issue with my site.  

https://turtle-salmon.squarespace.com/config/

https://turtle-salmon.squarespace.com/music/satb

Pword: JJD

When you go to Music it directly starts at the first category then to the left the other categories are listed for you to see and select. When you are the mobile version it goes to the first category but there is no option for the other categories. Can we make them accessible on the mobile version??

Thanks!