Extend header navigation menu width on Squarespace

Within the space of a couple of weeks, there was one question that I kept seeing pop up in the Squarespace online communities over and over again.

What was it?

“How can I extend the width of my navigation menu on Squarespace to stop the items stacking?”

When you start to add more items to your main navigation menu, Squarespace will start to stack them. So rather than having all elements next to each other in one line, you’ll have say four out of six elements in one row, and the next two underneath.

And honestly? This looks terrible.

Watch the video

Check out the YouTube video below 👇

Luckily, there is a way to make the width of the navigation menu wider so if, like those in the online forums, you’ve been wondering how to do it, read on to find out…

Once you’ve added your central navigation header to your Squarespace website, navigate to Design > Custom CSS. 

You’re going to need to create a few new lines of code. Always make sure to name your code in your CSS panel so you know what each piece of code you add is for. A simple name such as // Make header larger // works fine.

You then need to add the following custom code:

.header-nav {

width: 90% !important;

flex: 1 1 90% !important;

}

.header-title-nav-wrapper {

flex: 1 0 80% !important;

}

What this code does is target the navigation header and tells Squarespace to make it wider. You can have a play around with the width you go for.

---

📩 Join the inner circle to get exclusive code updates

---

Hit save and you’re done. A simple yet effective trick to make sure your Squarespace website looks slick and professional, no matter how many items you have in your main navigation menu. 

If you found this article useful be sure to take a look at the rest of the by Crawford Squarespace tutorials.

---

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?