Fixing Stacked Central Navigation in Squarespace
In this quick tutorial, learn how to fix the issue of stacked navigation elements in Squarespace by using simple CSS
Watch the video
Check out the YouTube video below š
Often, when adding multiple menu items while using center navigation in Squarespace, the items can stack. Below, Iām sharing some code to ensure they stay on a single line.
To get it working, head to the Custom CSS tab in Squarespace and paste the following code:
.header-nav {
width: 90% !important;
flex: 1 1 90% !important;
}
.header-title-nav-wrapper {
flex: 1 0 80% !important;
}
As you can see in the image below, the navigation items immediately align on a single line.
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
