Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
sisunaturals

Reorder Categories in Product Page Mobile Dropdown

Question

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

 

Screenshot_20191010-144432.png

Screenshot_20191010-144744.png

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

@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;
}
}

 

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

@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;
}
}

 

Edited by tuanphan
tag author

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...