Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


charplo

Recommended Posts

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?

Screen Shot 2021-01-06 at 18.25.58.png

Screen Shot 2021-01-06 at 18.26.06.png

Edited by charplo
spelling
Link to comment
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?

Screen Shot 2021-01-06 at 18.25.58.png

Screen Shot 2021-01-06 at 18.26.06.png

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;
    }
}

image.thumb.png.fdfeae6f5c0cd65eecbadc7d79e4cd06.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
    }
}

image.thumb.png.fdfeae6f5c0cd65eecbadc7d79e4cd06.png

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

Link to comment
  • 2 months later...
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;
    }
}

image.thumb.png.fdfeae6f5c0cd65eecbadc7d79e4cd06.png

This worked perfectly, thank you SO MUCH! 

Link to comment
  • 6 months later...

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!

Edited by JuleeBode
Want to make sure you can see and select category on mobile version.
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...