Create a Secondary Navigation in Squarespace 7.1
In Squarespace 7.0 you had the option to have some of your pages in a Secondary Navigation. This allowed you to style the navigations differently as well as place your logo or site title in the center with navigation items on each side.
Squarespace 7.1 does not have a secondary navigation option. There are several heading layout options provided, one of which has the site title in the center with items on either side. However, this places a button on one side and the navigation items on the other.
In this video, I show you how to create the above layout using custom css. All the code used in the video is provided below.
The following code has been updated since the video was recorded.
/*Secondary Navigation */
.header-title-nav-wrapper {
flex: 1 0 100%;
}
.header-display-desktop .header-title {
height: 4vw !important;
display: flex;
align-items: center !important;
justify-content: center;
}
.header-display-desktop .header-nav {
position: absolute;
top: 0;
width: 100%;
margin-top: 0 !important;
height: 4vw !important;
display: flex;
align-items: center !important;
justify-content: center;
}
.header-display-desktop .header-nav-item:nth-of-type(2) {
margin-right: 50vw !important;
}
#site-title, .header-title-logo {
position: relative;
z-index: 100;
}