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 👇
Want a framework for designing the perfect homepage?
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.
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
