Splitting your navigation bar in a responsive way on Squarespace

I absolutely love my Squarespace template -- my website is currently on the Shift template, which is a Marquee clone just like Alex and Adversary.  I love the parallax scrolling, the wide banner images, the clean and professional look.  I didn't, however, love the left-aligned logo in the main navigation bar.  So I set out to figure out a way to center my logo and split my navigation bar around it!

I found a number of custom CSS code snippets in my internet searching that purported to split the nav bar and center the logo, and many of them worked just fine.  The trouble, though, was that the split nav bar started looking really funky on tablets and when I shrank down my desktop browser window beyond a certain point.  So I revamped the custom code to make it properly responsive, so it flowed perfectly with my beautifully responsive Squarespace template.  :)

I know the below will work in the Marquee family of templates (Marquee, Alex, Shift, Adversary).  It or something like it may work in other templates as well.  Hopefully just seeing the below will help you decide how to format your own Squarespace nav bar!

Squarespace split navigation bar | Christina Keddie Photography | Squarespace web design tutorials

THE CUSTOM CSS CODE

(For those of you who just want the code snippet and will be happy to copy and paste it and move on!  Simply paste the below into your Custom CSS field, under your Design tab.  Note that this assumes you have six items in your nav bar -- if you have fewer or more than this, read the explanation below for what to tweak to make this code work for your site.)

 
/* Split navigation */
@media only screen and (min-width: 1024px) {
@media screen and (max-width: 60em) {
#desktopNav { display: none !important; }
.site-title {
display: table-cell !important;
text-align: left !important;
}
}
.title-nav-wrapper {
display: block;
}
.site-title {
display: block;
text-align: center;
width: 100%;
margin-bottom: -60px;
}
#desktopNav {
display: block;
text-align: center;
width: 100%;
}
.main-nav ul {
text-align: center;
}

nav li:nth-child(3) { padding-right: 200px; }

nav li:nth-child(4) { padding-left: 30px; }
}

THE EXPLANATION

Knowing how the component pieces of this code work will help you to tweak it as necessary for your own website.  So here are some user-friendly notes on how to understand this code snippet!

(One of the many nice things about Squarespace is that you have a real-time preview while you add custom CSS -- so you can see exactly what will happen when you change parts of the code, without having to save it and publish on your live site.  So be sure to watch your nav bar in the preview, and don't hit "save" until you're perfectly satisfied with it!)
 

The Responsive bits

 
@media only screen and (min-width: 1024px) {

...

}

The very first line (and the very last curly bracket) wrap the entire code with responsive goodness.  Having this @media query added onto this code means that the split navigation will only apply to desktop screens and tablets held in landscape (horizontal) orientation.  For screens or browser windows narrower than this (but wider than mobile phones), your standard un-split navigation bar will appear.  And for mobile phones, your template's mobile menu will appear (with the "hamburger" icon of three lines).

I added this line of code because my split navigation worked beautifully on wide desktop screens, but the nav bar sections started overlapping in unflattering and non-user-friendly ways on a tablet in portrait (vertical) orientation.  So adding this media query fixed that problem for me.  But it might be worth experimenting on your website, to see whether this added responsive line is necessary -- depending on how many menu items you have and how long each one is, you may not need this additional hack.  Try deleting the entire first line and the very last curly bracket in the code snippet and see for yourself.
 

Bits to tweak the placement and spacing of your newly split nav bar

 
.site-title {
display: block;
text-align: center;
width: 100%;
margin-bottom: -60px;
}

The site.title block of the code controls, among other things, the vertical placement of your nav bar relative to your logo. Play with the margin-bottom: -60px; value while watching the real-time preview to see what looks best to you!  -60px is what centers the nav bar vertically with my logo, but this value may change depending on your logo design.

 
nav li:nth-child(3) { padding-right: 200px; }
nav li:nth-child(4) { padding-left: 30px; }

The final two lines of the code control the horizontal spacing of your nav bar items. The numbers in (parentheses) after nth-child determine where the split will happen, in terms of the number of menu items. My nav bar has six total items, so my split happens between numbers 3 and 4. The two padding values can be tweaked to your taste to incrementally adjust the spacing between the menu items.

ANY QUESTIONS?

I hope this brief tutorial helps you in creating your own split navigation bar!  As always, feel free to contact me with any questions!

11 Comments