Jump to content

Looking to add line dividers and drop down arrows to shop category navigation.

Recommended Posts

Site URL: https://www.birdiealley.com/shop


I would love to add lines and drop down arrows similar to the ones pictured in the attached file but can't find any help online. It doesn't have to be exactly like the format in the attached image but anything similar would be great. Would anybody here be able to point me in the right direction. I have also attached a screenshot of my site which does not have the lines or arrows at the moment. 


Screenshot 2022-02-09 132835.jpg

Screenshot 2022-02-09 132854.jpg

Link to comment
  • Replies 1
  • Views 286
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Looks like you figured out how to add it, but it also looks like there are some alignment issues occurring and some unintended double borders happening. Here is a code snippet that will give you the same result, without the above issues:

.products.collection-content-wrapper .nested-category-tree-wrapper .category-item {
    border-bottom: #000 1px solid;
.products.collection-content-wrapper .nested-category-tree-wrapper a {
    display: flex !important;
    justify-content: space-between !important;

Hope this helps!

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.