This tutorial will show you how to add a fixed navigation bar, commonly referred to as sticky navigation, to your Squarespace website. This feature is ideal for password-protected sites and pages.
Squarespace 7.1 saw one significant change: the removal of split navigation (displaying items either side of your logo or title). Thankfully, this CSS reintroduces this functionality.
1. Go to Design
Navigation bars on websites are integral to user experience. They enable visitors to navigate easily around your content and increase page views per visit as a result! However, when your navigation bar includes many links it can become difficult and unreadable; this tutorial will show you how to address this issue using CSS magic.
Squarespace provides several easy ways for you to style your nav bar without custom code (though adding custom CSS is always an option). One simple method is by going into Design and choosing Site Header where you can make adjustments such as font size, color style and more.
This section’s options vary depending on your template, but all provide some basic ways that you can change the appearance of your nav bar. For instance, you could include a line or border under it; add “frosted glass” effects using gradients behind your menu; or blur its background.
Change the position of your navigation bar so it remains in its place as visitors scroll down the page, keeping it visible to users even on longer sites. This can help ensure users stay engaged as they explore.
This solution will only work on index pages using Brine family templates and requires you to be on either the Business Plan or higher because it uses JavaScript. If you’re on free trial, try another solution instead – perhaps this alternative one! It allows you to make subtle modifications to the look and feel of your site by altering elements such as the header, footer and more.
2. Select Site Header
Adopting a fixed header into your Squarespace website is an effective way to ensure the navigation bar remains visible while visitors scroll. This makes your site easier for people to use, increasing chances that visitors click on links within it.
To create a fixed header on Squarespace, login and access the page where you’d like it. Next, click Edit in the top-right corner.
Header & Navigation in the Layout section of the editor offers several options to customize the look and feel of your header, while you can rearrange the pages appearing in your navigation menu by dragging them.
To switch this setting, go to the STYLE tab in the header editing modal. By activating this option, your header will always remain visible (even when scrolling down) whereas using Scroll Back will make sure it only displays when scrolling back up toward the top of the page.
If you want to give your website an eye-catching aesthetic, select one of the pre-made styles for its header in the Header & Navigation tab of the editor. For instance, choose from styles featuring a border or line under your nav bar, frosted glass effects or blurring background effects.
Enhance the visuals of your navigation bar by replacing its standard hamburger icon with an attractive text button that makes more clear what its purpose is for site visitors. Simply add this CSS code snippet in the Header & Navigation tab of Editor to make this happen!
3. Select Fixed Header Style
Fixed navigation bars not only improve user experience, they look pretty cool as well. If your Squarespace template does not already include this feature, adding some custom CSS will allow you to easily incorporate it.
Log into your Squarespace account and navigate to the page where you wish to create a sticky header. In the upper-left corner, click Edit then Edit Site Header from the drop-down menu, scrolling down until reaching STYLE tab where toggle button next to Fixed Header Style can be toggled on and either Basic or Scroll Back can be selected as Fixed Header Style options – Basic will keep it visible always while scroll Back will only display when viewers scroll up from bottom of page.
Once you’ve selected your desired style, you can customize your header to complement the rest of your site. Choose between Solid colors to give your header a matte appearance; gradients to create an elegantly flowing transition between colors; or opt for Dynamic designs which transforms your background into a transparent overlay of the first image or section color on your page.
CSS allows you to take control of navigation bars on certain pages (e.g. landing pages for lead magnets) if that is what you prefer. Just add the following code into your Custom CSS and save it; just be sure that this appears at the very top so it doesn’t interfere with other styles you may have added.
4. Select Fixed Header Position
Website visitors expect to easily locate and navigate to the next page when browsing your site, but when your header disappears as they scroll, this can make finding navigation difficult, leading to poor user experiences and increasing conversion. That is why using fixed header techniques such as making sure the navigation remains visible is vital for user friendliness and increasing conversion!
This tutorial will show you how to add a fixed header to your Squarespace website. First, enter edit mode by clicking “edit” at the top left of your page preview and hovering over your header until an “Edit Site Header” button appears – once this happens you have two options for creating your fixed header:
By following this method, you will create a basic fixed header that remains visible regardless of how visitors scroll down the page. Furthermore, you can change its style for more aesthetic appeal; for instance if you prefer an uppercase font style in your header add this code:
For an added banner look, reduce section spacing in your layout settings. This will create more of an angled appearance but still allow visitors to access navigation easily at any time. Check out this video tutorial to learn more!
5. Click Save Changes
Save Changes is the final step when editing pages using the page editor, saving and publishing any modifications live to your site and any collection pages such as Events, Shop, or Blog posts. If you would rather keep your post or page as draft without publishing yet, select Draft or Needs Review in the options panel instead.
Some panels feature undo and redo arrows that allow you to undo or redo edits, which appear when hovering over them. You can also click Reset to reset them back to their initial state; sometimes this requires refreshing your browser before it takes effect.
Squarespace includes many tools built right in to make changes easier, and whenever possible it is best to take advantage of these. For instance, to resize images easily you can click and drag in the image editor instead of needing external tools like Photoshop to do so – all right within the page editor!
Custom styles give your content extra customization options. This lets you apply fonts, colors, and backgrounds that go beyond what is provided by the options panel. For instance, link colors can be altered to highlight important links or add visual interest; additionally you can inject code directly into your website in order to run scripts or other types of functionality.
One question I often receive concerns the easiest way to secure fixed navigation or sticky headers as visitors scroll down your site. With Squarespace’s latest 7.1 update, this process is straightforward.
