LouieLouie Posted November 2, 2023 Share Posted November 2, 2023 Password: hello I'm having a super inconsistent category menu. I want it to always be in the same spot with the same style on mobile and desktop while in categories and products. Right now the style changes, it disappears on products and in mobile it disappears when you enter a category. I've tried googling and using different code snippets but they all seem to fix one aspect and break another. Would be amazing if there's a code that can just make the category menu stick in place no matter where you are on the shop, mobile and desktop included. This would also be a great fix for Squarespace in the future, it seems there's many people who want this. Thanks so much! Link to comment
creedon Posted November 2, 2023 Share Posted November 2, 2023 Site URL? It is not included in the body of your post. 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
LouieLouie Posted November 2, 2023 Author Share Posted November 2, 2023 (edited) 10 hours ago, creedon said: Site URL? It is not included in the body of your post. Sorry about that! Knew I'd forget something lol. It's https://www.louiswesstudio.com/coming-soon Edited November 2, 2023 by LouieLouie Link to comment
creedon Posted November 2, 2023 Share Posted November 2, 2023 I just wanted to see what you are seeing before I commented. I already had an idea what you are seeing. The behaviour you are seeing is how SS designed the categories menu to work. On desktop, on the list pages, you have two options side or top. On mobile you only get top, because of the limited screen size. On the detail page you get no categories menu. You get the "breadcrumb". You could choose the top layout setting for categories and that would make the experience a little more consistent. It might be possible with custom code to create a categories menu experience you describe but it would not be an easy project. The main problem I see would be how to integrate the menu into detail pages that weren't designed for that element to be there. Also SS doesn't expose all categories on the product detail page so that would have to be built from scratch with is not easy on it's own. 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
LouieLouie Posted November 3, 2023 Author Share Posted November 3, 2023 3 hours ago, creedon said: I just wanted to see what you are seeing before I commented. I already had an idea what you are seeing. The behaviour you are seeing is how SS designed the categories menu to work. On desktop, on the list pages, you have two options side or top. On mobile you only get top, because of the limited screen size. On the detail page you get no categories menu. You get the "breadcrumb". You could choose the top layout setting for categories and that would make the experience a little more consistent. It might be possible with custom code to create a categories menu experience you describe but it would not be an easy project. The main problem I see would be how to integrate the menu into detail pages that weren't designed for that element to be there. Also SS doesn't expose all categories on the product detail page so that would have to be built from scratch with is not easy on it's own. Ah ok, thanks for the insights! I see what you mean. Would you happen to know if there's a way to at least keep up the top categories menu when changing between categories? If I use a side menu for categories they will stay in place while switching categories but when on mobile the top menu disappears after you click anything in the categories menu. Link to comment
LouieLouie Posted November 3, 2023 Author Share Posted November 3, 2023 I did some searching in these forums and was able to figure out a way to keep the category menu up in case anyone else comes looking for it. This is a combination of a few codes that were recommended here to others. /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: center; } .nested-category-tree-wrapper>ul li { margin-left: 2vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; } li.category-item:first-child a { padding-bottom: 0 !important; } @media screen and (max-width:767px) { div.nested-category-tree-wrapper ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } ElleR and NEC 2 Link to comment
NEC Posted February 28 Share Posted February 28 (edited) This is perfect, LouieLouie! I was trying to cobble exactly this from a bunch of 2020 posts. Thank you so much for this! Now I just have to tweak it so the category menu stays centered... Edited February 28 by NEC Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment