Creating a Navigation Bar for a Specific Page Only in Squarespace
I’m a little torn whether I should give this secret away since it’s one of the coding solutions I’m most proud of. You may have seen websites that have a special navigation bar that appears on one page only, such as a product feature page, menu page, members only page, etc. You may have thought to yourself, gee I wish there was a way to do something that complicated and ux-awesome on Squarespace. Well let me tell you: there is a way, my friends. There is a way.
A special nav bar for this page only should appear when you scroll past this point…
Note: This is a solution for Squarespace 7.0 Brine Family templates. If you’re looking for a Squarespace 7.1 solution, view this post instead.
This is a solution for Squarespace 7.0 Brine Family templates. Before you try it, make sure you are trying to use it on an index page in a Brine Family template. You also need to be on the Business Plan or higher, since this solution uses javascript.
Using a Brine Template?
Have an index page for which you want to create a special nav bar?
Have the Business Plan or higher (will also work in trial mode)?
Great! Let’s go!
Step 1: Check your url slug names for your index page sections. If you haven’t already done so, you’ll want these to be simple, easy-to-work-with urls such as “/burgers” “/shakes” “/sundaes” etc. To check them, navigate to your index page in the Pages panel, and click on the settings cog for the individual page sections. You will need to know what all your index page section url slugs are in Step 4, so you might want to jot them down for reference.
Step 2: Navigate to the Index Page you want to create a special navigation bar for, and click to edit the second section of the index page. Insert a Code Block into the second section. This is extremely important! If you put this code in the first section of the index page, really weird things will happen! Trust me! (You can try it just for fun if you want…)
It doesn’t matter what other content that second section contains, and it doesn’t matter where within the section you put the Code Block; it’s not going to actually show up anywhere in that section. But I’m telling you, this is where you need to put the Code Block. You just gotta believe.
If I were you, I would put the Code Block as the first element in that second section, to make it easier for you to find later. Because, as I said, nothing is going to actually show up there, so you have to remember where you put it later.
Step 3: Insert the following into the Code Block:
<style>
#special-nav > div{padding-right:20px}
#special-nav > div:last-child{padding-right:50px}
#special-nav {
position: fixed;
display:none;
flex-direction:row;
flex-wrap:wrap;
justify-content:flex-end;
background-color:#008278;
opacity:0.9;
padding:12px 12px 12px 12px;
width:100%;
top:64px;
left:0px;
z-index:1000 !important;
box-shadow: 4px 4px 7px rgba(0,0,0,0.4)
}
#special-nav h3 a{
color:white !important;
font-family:"Open Sans" !important;
font-size:13px;
}
#special-nav a:hover{color:white !important; opacity:0.6;}
@media screen and (max-width: 640px) {
#special-nav {position:static; display:flex; flex-direction:column; justify-content:center; align-items:center;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 36) {
$('#special-nav').css('display', 'flex');
} else {
$('#special-nav').css('display', 'none');
}
});
</script>
<div id="special-nav">
<div><h3><a href="/menu#burgers">Burgers</a></h3></div>
<div><h3><a href="/menu#shakes">Shakes</a></h3></div>
<div><h3><a href="/menu#sundaes">Sundaes</a></h3></div>
<div><h3><a href="/menu#cocktails">Cocktails</a></h3></div>
<div><h3><a href="/menu#specials">Specials</a></h3></div>
</div>Let’s break apart what this means. The code block is divided into three sections:
CSS (<style> — style properties of the navigation bar)
Javascript (<script> — an event that causes the bar to appear on scroll)
HTML (<div> — the content of the navigation bar itself)
Step 4: Let’s start with the HTML first, since nothing will show up until you set this. In the part of the Code Block (near the bottom) where it says <div id=”special-nav”>, substitute the correct page slugs for the examples I have listed.
Where my example says /menu, substitute the url slug for your Index Page. This is the page itself, not any section in the page. To view it, click the settings for the Index Page from the Pages panel.
Where my example says #burgers, #shakes, etc, substitute the url slugs for your page sections, which you jotted down in Step 1.
Substitute the word you want to appear in the navigation bar where my example says Burgers, Shakes, etc.
So the first div element, which in my example is <div><h3><a href="/menu#burgers">Burgers</a></h3></div>, will become <div><h3><a href="/index-slug#section-slug">What You Want Navigation Bar To Say</a></h3></div>
Step 5: Next let’s move on to the Javascript. You may not need to change anything here. I have the navigation bar set to appear when the viewer scrolls past 36 px, because in my original use case, that is when my top navigation bar disappeared.
The most likely scenario for you is that you will want to change the number 36 to the height of your regular navigation bar. This means that the special bar will appear once the viewer scrolls past your regular navigation bar.
If you have a fixed/sticky header, you’ll need to adjust based on your needs.
Step 6: Finally, let’s work with the CSS. Let me break it down for you.
The first two lines of code adjust the space between each item in the navigation bar, and the space after the final item, respectively.
In the next block of code, you will want to adjust background-color, opacity, and box-shadow to change the color and shadow of the bar. The most important item in that block is “top:64px;” which determines where your navigation bar “sticks” on scroll. If you do not have a sticky header, you will need to change this number to “top:0px;”. If you do have a sticky header, you will need to change it to the height of your header, which will cause it to appear directly beneath it.
The next block of code determines the color, font-family, and font-size of the navigation bar text. The last item creates a hover effect.
The @media query creates an alternate layout for the navigation bar on mobile. Replace the number 640px with your mobile breakpoint (find in Site Styles). If you don’t want an alternate layout, just delete everything from @media screen to the } before </style>. If you want to hide the navigation bar on mobile, replace this code with the following:
@media screen and (max-width: 640px) { #special-nav {display:none !important;}}
Well, now that I’ve written all this, I’m afraid it will take a BRAVE SOUL to tackle it, but I really hope someone does because it’s super fun once you get going. If you were brave enough to tackle this and got it to work, please let me know in the comments! Feel free to post your page url to inspire others.
Did I help you out? Want to say thanks?
Send me a little donation that reflects the value you found in this solution. I really appreciate it!
