Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
I think a lot of us designers had to shed a few tears when we saw that 7.1 didn’t have the option to separate your nav into two. Not essential for design, but like parallax, we were sad to see it go. The good news is, with a little CSS, we can totally fake it!! This tutorial will show you how to create a fake secondary navigation menu in Squarespace 7.1 using some fancy code.
This works for any number of links you have, and text or image logos – plenty of options here. This particular code below is for a four item menu, but you can update it for any number of nav items! Pay close attention to the 02:50 mark to learn more about that.
**THE CODE**
Text based site title, here is your code:
.header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:4vw; margin-top:-2vw; padding-bottom:1vw} .header-title {margin-bottom:-8.5%!important; margin-top:1vw} .header-nav-item:nth-child(3){margin-left: 35vw!important}
Image based site logo, here is your code:
.header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:4vw; margin-top:-2vw; padding-bottom:1vw} .header-title-logo img {margin-bottom:-8.5%!important; margin-top:1vw} .header-nav-item:nth-child(3){margin-left: 35vw!important}
PRO TIP
Be sure to adjust the margins and padding with the vw that best fits your own site style.
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks
The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.
