Jump to content

Missing Category Navigation

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 4
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

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: f

creedon
creedon

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 s

Posted Images

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

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!)

jessiebjenn Level 4

jessiebjenn

Posted
  • Author
Posted

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

creedon Level 15

creedon

Posted
Posted
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.

jessiebjenn Level 4

jessiebjenn

Posted
  • Author
Posted

Client also asked that the nav be shifted to the "top" view vs side column view on desktop and it's gone back to disappearing on every page... maddening!! 😞

Screenshot 2024-05-29 at 7.05.13 AM.png

Screenshot 2024-05-29 at 7.05.21 AM.png

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources