How to Increase Vertical Padding in Dropdown Menu – Squarespace 7.1
If you feel like your Squarespace 7.1 drop-down menus are compressed and crowded, you are not alone. The source of the problem: Dropdown links are often too close together for some site owners, at the cost of usability and mobile navigation!
Happily, there is a straightforward remedy:
Adding vertical padding to your dropdown menu items using custom CSS.
You can do this: lift the menu items apart vertically.
Improve visibility and accessibility of navigation menus
Get your website to look more slick and professional
touch Tablet and mobile touch users should have a better experience than the rest.
Whether you are creating a business website, portfolio, or online shop, it will only take a few lines of CSS to learn how to change dropdown spacing in Squarespace, no plugins or complex coding needed.
In this tutorial, you will learn:
Which Squarespace areas to customize with CSS
CSS: On how to add custom vertical padding to dropdown menus
Mobile optimisation and smooth hover effects were part of the brief
Today, we're going to take a look at this easy and effective dropdown spacing patch to make your Squarespace website feel cleaner, more user-friendly, and visually balanced.
Step-by-Step: How to Add Vertical Padding to Dropdown Menus
Step 1: Understand Which Elements to Target
In most Squarespace 7.1 templates:
| Item | CSS Class |
|---|---|
| Dropdown Menu Links | .header-menu-nav-item or .header-nav-folder-content .header-nav-folder-item |
You need to target the individual dropdown link items.
Step 2: Add Custom CSS to Increase Vertical Padding
Go to:
Design > Custom CSS
Paste this code:
/* Increase vertical padding in dropdown menus */
.header-nav-folder-content .header-nav-folder-item {
padding-top: 12px;
padding-bottom: 12px;
}
This will:
Add 12px padding above and below each menu link
Create more vertical breathing space inside the dropdown
Adjusting for Your Design
You can customize:
padding-top: 16px;
padding-bottom: 16px;
or
padding-top: 20px;
padding-bottom: 20px;
Larger padding = bigger clickable area = better UX (especially mobile)!
Step 3: (Optional) Smooth Transition Effect on Hover
You can also add hover effects if you want a smoother interaction.
Add this below your CSS:
.header-nav-folder-content .header-nav-folder-item {
transition: all 0.3s ease;
}
.header-nav-folder-content .header-nav-folder-item:hover {
background-color: #f9f9f9; /* Light background on hover */
}
Now, when users hover over links, they get a smooth background highlight + nice spacing!
Mobile Behavior Tip
This CSS works well on both desktop and tablet views.
If you want different padding for mobile, you can add:
@media only screen and (max-width: 767px) {
.header-nav-folder-content .header-nav-folder-item {
padding-top: 14px;
padding-bottom: 14px;
}
}
This ensures your mobile dropdown is easier to tap and doesn't feel crowded.
Quick Summary:
| Step | Action |
|---|---|
| 1️⃣ | Identify the dropdown menu item classes |
| 2️⃣ | Add padding-top and padding-bottom using Custom CSS |
| 3️⃣ | (Optional) Add hover transitions for smoother interaction |
| 4️⃣ | Preview and adjust padding to your liking |
You’ll have a beautiful, clean, and spacious dropdown menu!
Final Result:
After setting this:
Your dropdown menus feel bigger, cleaner, and easier to click
Visitors enjoy a better navigation flow
The site feels more professional on desktop and mobile
A small padding change = a huge UX improvement!
Important Notes:
| Tip | Reason |
|---|---|
| Keep padding consistent | Makes the menu easier to scan |
| Test across screen sizes | Check desktop, tablet, and phone |
| Avoid extreme padding | Too much = too much scrolling in small menus |
FAQ: Vertical Padding in Dropdown Menus on Squarespace 7.1
1. What does “vertical padding” mean in a dropdown menu?
Vertical padding refers to the space above and below each dropdown menu item (link). Increasing this space makes each link easier to tap, read, and visually distinguish, especially on touch devices and small screens.
2. Which elements in Squarespace 7.1 should I target to change this padding?
You should target:
.header-nav-folder-content .header-nav-folder-item
This is the class used by Squarespace for dropdown links inside folder navigation items. It applies across all 7.1 templates.
3. How do I add vertical padding to my dropdown links?
Go to Design → Custom CSS and paste:
.header-nav-folder-content .header-nav-folder-item {
padding-top: 12px;
padding-bottom: 12px;
}
This adds breathing room between items for a cleaner menu layout.
4. Can I customize the amount of padding?
Yes! You can increase or decrease the values to fit your design. For example:
padding-top: 16px;
padding-bottom: 16px;
This provides a more spacious, luxury-style menu feel — ideal for high-end or minimalist websites.
5. Will this work on mobile menus too?
Yes, it applies to both desktop and mobile dropdowns.
If you want mobile-specific padding, wrap your styles in a media query:
@media only screen and (max-width: 767px) {
.header-nav-folder-content .header-nav-folder-item {
padding-top: 14px;
padding-bottom: 14px;
}
}
6. Can I add a hover effect to match the padding update?
Definitely. Add:
transition: all 0.3s ease;
And:
.header-nav-folder-content .header-nav-folder-item:hover {
background-color: #f9f9f9;
}
This gives users smooth feedback when they hover over each link.
7. Will adding padding affect my menu layout or site structure?
No — it only affects the space within the dropdown menu items. The menu structure, links, and layout remain intact. It simply improves clickability and design spacing.
8. What if my dropdown menu becomes too long?
If you add too much padding (e.g., over 24px top and bottom), the dropdown may stretch beyond the screen on smaller devices. Always test:
How long do menus look
Whether all items are accessible
That no scrollbars or cutoffs appear
