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

[Share] Reorder Category Nav List (7.1)


tuanphan

Question

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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. The code I used (Home >

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 Mot

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:nt

Posted Images

11 answers to this question

Recommended Posts

  • 0

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

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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

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 detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

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!

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