Jump to content

split category navigation over 2 lines

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

8 hours ago, lievenb said:

Site URL: https://www.carolinebosmans.com/stocksale

Hi,

I have a 7.0 Ishimoto product page.

I have set up category's  for selection purposes.

Can I manual force my category's to go to a second line?

 

In my example I would like to start 'CAP' on a second line.

Both lines should be centered.

category navigation.JPG

Try adding to Home > Design > Custom Css

#collection-61a506bcac7ec229e437fb3e .category-nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#collection-61a506bcac7ec229e437fb3e .category-nav-links > li:nth-child(-n + 11) {
  width: 6%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.thumb.png.bc46add027853b1e81d61cf0e8da76f4.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.