Squarespace Tutorial: Rounded Corners Folder Navigation

If you have a folder navigation with drop down options on your Squarespace website then you might want to round the corners of your drop down.

Interestingly this isn’t a native Squarespace feature but all you need to do is add a simple but of custom CSS. Let’s take a look…

Watch the video

Check out the YouTube video below 👇

Head to Website > Website Tools > Custom CSS and add the following code into your custom CSS box

.header-nav-folder-content {
border-radius: 10px;
}

This code targets your folder navigation drop downs and changes the border radius to create a rounded effect.

You can play around with the px of the border radius to achieve the rounded effect you’re hoping for.

Once you’re happy with how your rounded corners look, hit save and you’re all done!

---

📩 Join the inner circle to get exclusive code updates

---

For more insights on how to use custom code on Squarespace take a look at the rest of my expert Squarespace resources.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?