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:
Pages → Custom code → Custom CSS
Paste this code:

Copy

Copied!

/* Increase vertical padding in dropdown menus */
.header-nav-folder-content .header-nav-folder-item {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* add background color and border to the dropdown folder */
.header-nav-folder-content {
  background-color: #fcfeff !important;
  border-radius: 5px !important;
  border: 5px solid #a4e0f2;
}

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:

Copy

Copied!

.header-nav-folder-content .header-nav-folder-item {
  transition: all 0.3s ease;
  padding: 5px 10px !important;
}
.header-nav-folder-content .header-nav-folder-item:hover {
  background-color: #d2ecf4; /* Light background on hover */
  border-radius: 4px !important;
  padding: 5px 10px !important;
}

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:

Copy

Copied!

@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

---

Frequently Asked Questions

• 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 Pages → Custom code → 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;

    }

  }