sisunaturals Posted October 10, 2019 Share Posted October 10, 2019 Hello, As the categories / product list automatically sorts in alphabetical order, I have used CSS to rearrange this on a desktop size screen. However, when switching to mobile it turns the horizontal bar into a dropdown category menu. I am looking for a way to reorder the categories on this list but keeping the dropdown style. I want them in the order ALL, EVERYONE, BUNDLES & KITS, BABY, MAMA. Link is https://www.sisunaturals.com/shop I've also attached two screenshots of what it looks like on mobile when I attempt to reorder and what it looks like without Link to comment
tuanphan Posted October 11, 2019 Share Posted October 11, 2019 @sisunaturals Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .ProductList-filter-list { display: flex !important; flex-direction: column; } /* Everyone */ .ProductList-filter-list-item:nth-child(4) { order: 2; } /* Bundles - kits */ .ProductList-filter-list-item:nth-child(3) { order: 3; } /* Baby */ .ProductList-filter-list-item:nth-child(2) { order: 4; } /* Mama */ .ProductList-filter-list-item:nth-child(5) { order: 5; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sisunaturals Posted October 11, 2019 Author Share Posted October 11, 2019 10 minutes ago, tuanphan said: @sisunaturals Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .ProductList-filter-list { display: flex !important; flex-direction: column; } /* Everyone */ .ProductList-filter-list-item:nth-child(4) { order: 2; } /* Bundles - kits */ .ProductList-filter-list-item:nth-child(3) { order: 3; } /* Baby */ .ProductList-filter-list-item:nth-child(2) { order: 4; } /* Mama */ .ProductList-filter-list-item:nth-child(5) { order: 5; } } @tuanphanthank you SO much! Do you know how I can get it back to a functioning drop down menu that opens and closes when you click on the arrow? Thanks in advance Link to comment
tuanphan Posted October 11, 2019 Share Posted October 11, 2019 @sisunaturalsokay, try this @media screen and (max-width:640px) { .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list { display: flex !important; flex-direction: column; } /* Everyone */ .ProductList-filter-list-item:nth-child(4) { order: 2; } /* Bundles - kits */ .ProductList-filter-list-item:nth-child(3) { order: 3; } /* Baby */ .ProductList-filter-list-item:nth-child(2) { order: 4; } /* Mama */ .ProductList-filter-list-item:nth-child(5) { order: 5; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.