Jump to content

Reorder category list from shop page on Brine

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

/* Table - Desktop */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}

/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
}

do similar for other items...

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
4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* Table - Desktop */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}

/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
}

do similar for other items...

Thank you so much it's working !! How can I implement this on mobile as well ? 

Link to comment
@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 6;
}
}

Do similar for other items

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
  • 1 month later...
On 3/3/2020 at 2:03 PM, tuanphan said:

@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 6;
}
}

Do similar for other items

Hey, 

I did add the following code but it doesn't seem to work on mobile. 

Thanks for your help !

Robin

 

@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
  
 }

.ProductList-filter-list-item:nth-child(2) {
    order: 5;
}
  .ProductList-filter-list-item:nth-child(3) {
    order: 6;
}
  .ProductList-filter-list-item:nth-child(4) {
    order: 4;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
  .ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
}

Link to comment

Try this for mobile

@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked ~ ul {
    display: flex !important;
    flex-direction: column;
}
/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
/* Do similar for other items
}

 

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
On 4/11/2020 at 10:21 AM, tuanphan said:

Try this for mobile


@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked ~ ul {
    display: flex !important;
    flex-direction: column;
}
/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
/* Do similar for other items
}

 

It did the job ! Thank you so much

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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