[Share] Reorder Category Nav List (7.1)

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

Hope it useful.

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

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

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

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

Is there a way to hide or modify the underline on hover and active links?

39 minutes ago, Modern_B said:

Is there a way to hide or modify the underline on hover and active links?

Can you share link? I can take a look

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.

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

Perfect as always, thanks mate!

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

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

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!

This is super helpful, would this work on navigation as well? For example, on this page:https://www.aamcaccess.com, if I wanted to reorder the main navigation and put Contact in front of Team, would the nth child rule still work? I am having trouble with it. 

On 12/4/2020 at 4:28 AM, Barryk12 said:

This is super helpful, would this work on navigation as well? For example, on this page:https://www.aamcaccess.com, if I wanted to reorder the main navigation and put Contact in front of Team, would the nth child rule still work? I am having trouble with it. 

You can drag it in Main Navigation

It wont let me since the main navigation is a index, and I cant put a folder into a index. 

I attached a screenshot so you can see the folder and the index.

17 hours ago, Barryk12 said:

It wont let me since the main navigation is a index, and I cant put a folder into a index. 

I attached a screenshot so you can see the folder and the index.

Add to Home > Design > Custom CSS

nav#mainNavigation {
    display: flex;
    justify-content: center;
}
nav#mainNavigation>div:nth-child(1) {
    order: 1;
}
nav#mainNavigation>div:nth-child(2) {
    order: 2;
}
nav#mainNavigation>div:nth-child(3) {
    order: 3;
}
nav#mainNavigation>div:nth-child(4) {
    order: 4;
}
nav#mainNavigation>div:nth-child(7) {
    order: 5;
}
nav#mainNavigation>div:nth-child(5) {
    order: 6;
}
nav#mainNavigation>div:nth-child(6) {
    order: 7;
}
nav#mainNavigation>div:nth-child(8) {
    order: 8;
}