Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
tuanphan

[Share] Reorder Category Nav List (7.1)

Question

Posted (edited)

In this post, I will share some simple tips to Reorder items on Category Navigation List on Squarespace 7.1.

Here is a website I solved for a member on forum.

cat-nav.png.4f5f4eec459c1074d57289c6e882e7ea.png

The code I used (Home > Design > Custom CSS)

/* Hide Line */
span.category-filter-delimiter.has-category {
    display: none;
}
/* Pre order */
.category-filter-item:nth-child(3) {
    order: 1;
}
/* Tees */
.category-filter-item:nth-child(7) {
    order: 2;
}
/* Sale */
.category-filter-item:nth-child(5) {
    order: 3;
}
/* All */
.category-filter-item:nth-child(1) {
    order: 4;
}

Explain

1. Each item in Nav will have a certain number from left to right.

Here

  • Pre-order: nth-child(3)
  • Tees: nth-child(7)
  • Sale: nth-child(5)
  • ...
  • 2, 4, 6, 8.. is Lines beween items

2. To reverse the order between items, we use the order

in above code, you will see

/* Pre order */
.category-filter-item:nth-child(3) {
    order: 1;
}
/* Tees */
.category-filter-item:nth-child(7) {
    order: 2;
}
/* Sale */
.category-filter-item:nth-child(5) {
    order: 3;
}
/* All */
.category-filter-item:nth-child(1) {
    order: 4;
}

3. You need to hide Lines between items with this code

/* Hide Line */
span.category-filter-delimiter.has-category {
    display: none;
}

This is optional, only if it appears, it will take more time to adjust the order of items.

and Result

navlist2.png.c7004514cf129bba9c2d0246ebafde0f.png

Hope it useful.

Drop your shop page url if you can't solve your problem.

Edited by tuanphan
update ss version

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0
Posted (edited)

Hi! I tried your code, but it did not work for my site. I was hoping you could help me reorder my category navigation list. I am trying to have it be: All, Monday, Wednesday, Friday. I'm using the Motto template. https://www.sundogbread.com/preorder

***Edit:

I was able to reorder my column navigation list using the code below. Hopefully this will help someone! 

@media screen and (min-width:641px) {
.ProductList-filter-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      flex-direction: column;
    -webkit-justify-content: space-around;
    justify-content: left;
}
/* All */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* Friday */
.ProductList-filter-list-item:nth-child(2) {
    order: 4;
}
/* Monday */
.ProductList-filter-list-item:nth-child(3) {
    order: 2;
}
/* Wednesday */
.ProductList-filter-list-item:nth-child(4) {
    order: 3;
}
}

Edited by sundog
Solved problem

Share this post


Link to post
  • 0

Hey Tuanphan,

Your tutorial worked brilliantly for me, and helped educate me quite a bit. I appreciate it.

I have run into one slight problem that you might be able to help me with. The categories on the mobile view are aligned to the left, and I would prefer them to be centred. Would you be able to quickly draw up a piece of code to fix this? I have attached a picture so you can see what I'm on about.

www.haarlemvintage.com

Kind Regards,

Jagger, Haarlem Vintage

 

Screen Shot 2020-05-03 at 10.08.27 AM.png

Share this post


Link to post
  • 0
17 hours ago, haarlemvintage said:

Hey Tuanphan,

Your tutorial worked brilliantly for me, and helped educate me quite a bit. I appreciate it.

I have run into one slight problem that you might be able to help me with. The categories on the mobile view are aligned to the left, and I would prefer them to be centred. Would you be able to quickly draw up a piece of code to fix this? I have attached a picture so you can see what I'm on about.

www.haarlemvintage.com

Kind Regards,

Jagger, Haarlem Vintage

 

Where al, s, m, l? I don't see on your site


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
On 5/8/2020 at 7:02 AM, Modern_B said:

Thanks @tuanphan here is the page in question: https://www.studiobon.co.nz/shop Password: TEMPB1803

Just want to remove the animated underline on hover for the Category Navigation List and remove the solid line from the active selection.

Add to Home > Design > Custom CSS

a.category-filter-link:after {
    display: none;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

Thanks so much for the code help!  Can you assist me with one additional thing?  I was able to reorder the categories and they are ordered as I'd like, but all the lines between the categories are now stacked at the start of the list.  Is there a way to put them back between each category?  I'd like to keep them if possible.

My site is www.clpcalligraphy.com/shop

Share this post


Link to post
  • 0
On 5/27/2020 at 9:50 AM, CPCalligraphy said:

Thanks so much for the code help!  Can you assist me with one additional thing?  I was able to reorder the categories and they are ordered as I'd like, but all the lines between the categories are now stacked at the start of the list.  Is there a way to put them back between each category?  I'd like to keep them if possible.

My site is www.clpcalligraphy.com/shop

the lines has order

  • span.category-filter-delimiter.has-category:nth-child(2)
  • span.category-filter-delimiter.has-category:nth-child(4)
  • span.category-filter-delimiter.has-category:nth-child(6)

to set order for these lines, use

span.category-filter-delimiter.has-category:nth-child(2) {
	order: 2;
}

just an example, repeat for other lines


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

Hi @tuanphan, thanks very much for this. When I enter the code here, I can see that my "All" category changes order but I'm still struggling to reorder all of my other categories and get it how I would like.

My URL is: https://philipstewart.squarespace.com/

Could you please have a look and let me know what code I need to use...

Currently the order is - All, Beyond Scotland, Cityscapes, Flora & Fauna, Landscapes, Nightscapes, Seascapes

The order I would like is - All, Landscapes, Seascapes, Cityscapes, Nightscapes, Flora & Fauna, Beyond Scotland

Thank you!

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...