How to Fix Navigation Breaking into Two Lines in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

Are your Squarespace 7.1 website's navigation menu items splitting into two lines on smaller screens? You're not alone. It’s a common problem that many website owners face, but the great thing is it’s easily fixable with just a little bit of CSS and layout trickery.

In this post, we take a look at why this occurs, how to resolve it, and most importantly, in a nice and clean, responsive, and professional manner.

What’s the Issue?

And here’s generally what your navigation looks like when it changes from one to two lines on your site:

  • The logo, along with the navigation menu, stacks up vertically

  • Long navigation items are not wrapping and overflowing the blocks.

  • Line break on Tablets and medium-sized devices

And this can ruin the user experience, especially if your site looks fine on desktop, but is hideous on tablets or small laptops.

Why Does This Happen?

This issue often occurs because of:

  • Too many navigation links

  • Large logo width

  • Long menu text

  • Custom CSS forcing full-width layouts

  • Lack of breakpoints or responsive rules

A common culprit is this CSS:

Copied!

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;
}

This forces the navigation container to take up the full width, which causes the navigation and logo to stack on top of each other, even when there is sufficient screen space available.

Solution 1: Use Responsive Flex Settings

To prevent the stacking and allow the logo and navigation to share space:

Copied!

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 1 1 auto !important;
}

What it does:

  • Allows the header container to grow or shrink based on available screen width

  • Keeps logo and menu inline (until the screen is too narrow)

Solution 2: Trigger Mobile Menu Earlier

If you prefer a mobile-friendly hamburger menu to appear before the break happens, use this:

Copied!

@media screen and (max-width: 1024px) {
  .header-nav, .header-actions {
    display: none !important;
  }
  .header-menu-icon {
    display: block !important;
  }
}

Benefits:

  • Clean mobile layout

  • Avoids wrapping issues

  • Maintains professional appearance on all devices

Solution 3: Optimize Logo Size

Reduce logo size on smaller screens to free up space:

Copied!

@media screen and (max-width: 1024px) {
  .header-branding img {
    max-width: 120px !important;
  }
}

Solution 4: Use Dropdowns or Shorter Nav Links

If your navigation bar includes 6–7+ links:

  • Group them into folders

  • Use shorter text labels

  • Move secondary links to the footer

Final Thoughts

Responsive navigation is a critical part of a user-friendly website. With the right CSS tweaks, you can maintain a polished, single-line navigation across devices or smartly switch to a mobile menu before things break.

Where to Add the Code:

  1. Go to Squarespace Dashboard

  2. Navigate to Pages → Custom code → Custom CSS

  3. Paste your selected CSS fixes at the bottom

  4. Save changes and test on different screen sizes

Frequently Asked Questions (FAQ)

1. Why is my navigation bar breaking into two lines on some screens?
A: It typically happens due to one or more of the following:

  • Too many menu items

  • A wide logo image

  • Custom CSS forcing full-width containers (like flex: 0 0 100%)

  • Lack of proper responsive breakpoints

These issues can cause the navigation and logo to stack vertically when there’s enough space for a single-line layout.

2. How can I keep the logo and menu on the same line?
A: Use this CSS to allow flexible space sharing:

Copied!

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 1 1 auto !important;
}

This ensures the navigation wrapper adjusts with screen size instead of forcing a full-width stack.

3. Can I force the hamburger (mobile) menu to appear earlier?
A: Yes! You can manually trigger the mobile menu layout at a higher screen width using media queries:

Copied!

@media screen and (max-width: 1024px) {
  .header-nav, .header-actions {
    display: none !important;
  }
  .header-menu-icon {
    display: block !important;
  }
}

This prevents awkward wrapping on mid-sized screens like tablets and small laptops.

4. My logo looks fine on desktop, but breaks the layout on tablets. What can I do?
A: Reduce the logo size on smaller screens to free up navigation space:

Copied!

@media screen and (max-width: 1024px) {
  .header-branding img {
    max-width: 120px !important;
  }
}

5. I have 7 or more menu items. Is that too many?

A: Possibly. Try:

  • Grouping related links under folders

  • Abbreviating link text (e.g., “About Our Company” → “About”)

  • Pushing non-critical links to the footer

Clean, organized navigation which hammers home both UX, layout responsiveness.

6. Where do I place this custom code in Squarespace?

A: Copy and paste the following code into Design > Custom CSS. Hit Save and test it out at a few different screen sizes.

7. Will these adjustments work on all Squarespace 7.1 templates?

A: Yes. Header and navigation set up are pretty much the same in 7.1 templates, so these CSS tweaks are universal.

8. Does modifying the navigation CSS impact SEO or Accessibility SEO?

A: No. These adjustments have no impact on how the navigation works and acts. They won’t damage your SEO or accessibility, and they make for a clean, consistent, easy-to-use menu on all devices.