Jump to content

[Share] Reorder Category Nav List (7.1)

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

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

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

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 comment
  • 2 weeks later...

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

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

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

 

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
  • 2 weeks later...

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

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
  • 2 weeks later...

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 comment
  • 5 months later...
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

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

Screen Shot 2020-12-03 at 11.09.01 AM.jpg

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

 

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

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.