Custom Second Navigation in Squarespace
What does this code do?
This code snippet will allow you to add another navigation in Squarespace above your current header. This includes a search bar, social icons, and additional links that will be displayed above your main navigation on both desktop and mobile.
Note: You can have two navigations in Squarespace 7.0 by using the Primary and Secondary Navigation Sections as well as the Top and Bottom Placements in Site Styles. However if this is not giving you the look you would like to achieve, you can use this code snippet in both Squarespace 7.0 and 7.1.
Video Tutorial
Code Snippets
Font Awesome
This code snippet uses Font Awesome for its icons. If you will be adding icons to the navigation, you will need to copy and paste your Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.
To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.
<!--Font Awesome --> <script src="https://kit.fontawesome.com/123456abcd.js" crossorigin="anonymous"></script>
Custom Navigation
Copy and paste this code into Settings > Advanced > Code Injection > Header.
<!--Custom Navigation --> <div id="custom-navigation"> <div class="custom-navigation-left"> CODE FOR THE LEFT GOES HERE </div> <div class="custom-navigation-right"> CODE FOR THE RIGHT GOES HERE </div> </div>
Add Your Navigation Parts
Copy and paste the parts of the navigation you would like into the left or right code from above.
Links (including Social Icons)
<div class="custom-navigation-links"> <a target="_blank" href="mailto:EMAIL HERE"><i class="fa fa-envelope-o"></i> Contact Us</a> <a target="_blank" href="GOOGLE MAP LINK"><i class="fa fa-map-marker"></i></a> <a target="_blank" href="tel:NUMBER HERE"><i class="fa fa-phone"></i></a> <a target="_blank" href="#"><i class="fab fa-facebook"></i></a> <a target="_blank" href="#"><i class="fab fa-instagram"></i></a> <a target="_blank" href="#"><i class="fab fa-twitter"></i></a> </div>
Go to Font Awesome and customize the class names of the icons you want to use. For example, the Etsy icon is class =” fa fa-etsy”. Then edit the links to match where you would like the icons to take your visitors. For example, if they click on the Etsy icon, what is the link to your Etsy Shop?
Search Bar/Icon
This search bar will turn into an icon on mobile.
<div class="sqs-block search-block sqs-block-search" id="header-search-bar"> <div class="sqs-block-content"> <div class="sqs-search-ui-text-input sqs-search-ui-button-wrapper color-dark" data-source="block" data-preview="true" data-collection=""> <div class="spinner-wrapper" style="display: none;" hidden="hidden"> <div class="yui3-widget sqs-spin light default"> <div class="sqs-spin-content"></div> </div> </div> <input type="search" class="search-input hover-effect" value="" placeholder="Search" aria-label="Search"> <div class="yui3-widget sqs-widget sqs-search-preview"> <div class="sqs-search-preview-content"></div> </div> </div> </div> </div> <div id="header-search-icon"> <a href="/search?q"><i class="fas fa-search"></i></a> </div>
This code is set to use the dark version of the search bar. To use the light version change the words “color-dark” to “color-light” in the code above.
Javascript
This code will place your custom navigation above the header of the site and make sure it doesn’t display until it is ready. Copy and paste the following code into Settings > Advanced > Code Injection > Footer
<!--Custom Navigation --> <script> (function() { var customNav = document.getElementById("custom-navigation"); customNav.style.display = "flex"; var headerNav = document.querySelector(".sqs-announcement-bar-dropzone"); headerNav.after(customNav); })(); </script>
Custom CSS
This code will vary greatly depending on what you used in your navigation and where you placed them. Copy and Paste the following into Design > Custom CSS. Then edit the code to work for the elements you used.
/* Custom Navigation */
#custom-navigation {
position: relative;
top: 0;
right: 0;
left: 0;
height: 20px; /* height of the navigation bar */
z-index: 20;
display: none;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
background: white; /* background of the navigation bar */
padding: 1vw 3vw;
}
#custom-navigation a {
color: black; /* color of the links and icons */
}
.custom-navigation-left, .custom-navigation-right {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.custom-navigation-right {
flex: 1;
justify-content: flex-end;
}
.custom-navigation-left {
justify-content: flex-start;
}
.custom-navigation-links {
display: flex;
flex-direction: row;
align-items: center;
margin: 5px;
pointer-events: auto;
}
.custom-navigation-links a {
padding: 5px; /* spacing between links */
}
.custom-navigation-links i {
padding-right: 5px; /* spacing between text and links */
}
#header-search-bar{
width: 150px; /* width of the search bar */
}
#header-search-bar .search-input {
border: none;
border-bottom: 1px solid grey; /* bottom border on the search bar */
height: 15px; /* height of the search bar */
}
#header-search-icon{
display: none;
}
@media only screen and (max-width: 640px) {
#custom-navigation {
height: 40px; /* height of the navigation bar on mobile */
}
#header-search-bar{
display: none;
}
#header-search-icon{
display: flex;
align-items: center;
}
}Update: Links in the Center
If you are looking to only have links in the centre instead of on the left and right, use the following code in your header instead.
<!--Custom Navigation -->
<div id="custom-navigation">
<div class="custom-navigation-center">
CODE FOR THE CENTER GOES HERE
</div>
</div>Fill in the navigation parts you would like and follow the remaining steps until you get to the CSS. Then use the following code instead instead of the CSS above.
/* Custom Navigation */
#custom-navigation {
position: relative;
top: 0;
right: 0;
left: 0;
height: 20px; /* height of the navigation bar */
z-index: 20;
display: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background: white; /* background of the navigation bar */
padding: 1vw 3vw;
}
#custom-navigation a {
color: black; /* color of the links and icons */
}
.custom-navigation-center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.custom-navigation-links {
display: flex;
flex-direction: row;
align-items: center;
margin: 5px;
pointer-events: auto;
}
.custom-navigation-links a {
padding: 5px; /* spacing between links */
}
.custom-navigation-links i {
padding-right: 5px; /* spacing between text and links */
}
#header-search-bar{
width: 150px; /* width of the search bar */
}
#header-search-bar .search-input {
border: none;
border-bottom: 1px solid grey; /* bottom border on the search bar */
height: 15px; /* height of the search bar */
}
#header-search-icon{
display: none;
}
@media only screen and (max-width: 640px) {
#custom-navigation {
height: 40px; /* height of the navigation bar on mobile */
}
#header-search-bar{
display: none;
}
#header-search-icon{
display: flex;
align-items: center;
}
}How To Use It
Copy and paste the code as indicated above.
Customize the code to match the elements you would like in your navigation.
Copy and paste your code into Code Pen to make sure your code is free of errors.
