Jump to content
Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

You can use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
	h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper {
    display: flex;
    float: none !important;
    max-width: unset !important;
    min-width: unset !important;
    width: 100% !important;
    padding-left: 0 !important;
}
h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}
    h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
	.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
		padding-top: 6px;
	}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Amazing!!! Thank you so much!!!

Last final element: When first landing on the shop page, the nav is formatted with | divider lines and isn't constrained within the vw –– any ideas on how to address for consistency?

Thanks in advance!!

image.thumb.png.5902f8b2e0ff7e32980099ca130093a7.pngimage.thumb.png.75d5a7dd7bb0ef713a4ae1ca02939333.png

Link to comment
Quote

why the category navigation is disappearing in mobile view

Just a note for folks following on. The default way SS has the nav set up on mobile is a long horizontal list that you can scroll. I assume they did this because of space. If all your categories are shown at once then there is the possibility that folks just see a bunch of text and move on.

Where SS fell down on the job was not making it very apparent that you can scroll that horizontal list. Something like a nice little bouncing right arrow on the right side might have done the trick to get folks to clue in. Or, some kind of animation that kinds of starts a scroll and then snaps back.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.