fercoresc Posted September 13, 2022 Share Posted September 13, 2022 Site URL: https://fernandacortina.com Hello, I am trying to get all my categories to show on a shop category page. I've used the code below by @tuanphan but there's an alignment issue with the 'All' category that I can't seem to fix. /* 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; } If you look at the attached photo, you'll see it sits slightly higher than the categories on the row. Url is: https://www.fernandacortina.com/prints/store/fine-art Link to comment
Ziggy Posted September 14, 2022 Share Posted September 14, 2022 This probably isn't the best fix, but the first link is missing a top padding of 6px, and this should correct that: .products.collection-content-wrapper .nested-category-tree-wrapper .category-link { padding-top:6px !important; } tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Solution tuanphan Posted September 17, 2022 Solution Share Posted September 17, 2022 On 9/14/2022 at 5:00 AM, fercoresc said: Site URL: https://fernandacortina.com Hello, I am trying to get all my categories to show on a shop category page. I've used the code below by @tuanphan but there's an alignment issue with the 'All' category that I can't seem to fix. /* 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; } If you look at the attached photo, you'll see it sits slightly higher than the categories on the row. Url is: https://www.fernandacortina.com/prints/store/fine-art Because another links have top/bottom 6px, with All, it has 0 top padding You can use this CSS to fix it .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-top: 6px !important; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment