Styling Navigation Menu Folders/Dropdown with Multiple Folders

Site URL: https://www.waterloogin.com/

Hi - 

I have applied css tweaks to a dropdown folder in my navigation in a Squarespace 7 template.  Now I would like to add a second folder in my navigation but have those css tweaks only apply to ONE folder (it will be the last/ 2nd one) and not applied globally. 

----

Here are the tweaks I have applied to my existing folder:

.Header-nav-folder-item:nth-child(1){display: none;}    ---> to hide the first link in the folder so it clicks through to a separate landing page

.Header-nav-folder-title {
padding: 10px 20px !important;
border: 2px solid #fff !important;
}    ----> to add border around the folder 

----

I have tried using .Header-nav-item .Header-nav-item-folder:nth-child(2) before the code above to attempt to target only the second folder but it didn't work. For now, only the one folder is live on the site until I can figure out a solution. 

Greatly appreciate any and all advice. 

You want to target "Shop Merch" item only?

Hi @tuanphan - thanks for taking a look. Yes ultimately I would want to target the "shop now" folder only with css customization, and I will be adding another folder to the menu that requires no customization. 

I was able to figure it out thanks!

For these particular tweaks I replaced css with this JQuery  for the click-able folder:  https://www.adlyticmarketing.com/blog/squarespace-redirect-a-folder-click-in-navigation-menu

And then this code to put a border around only the last folder: 

.Header-nav.Header-nav--primary span.Header-nav-item:last-of-type {
border: 2px solid #fff !important; }