Squarespace: Replacing Navigation Section with Custom Login Button

What we are going to do

The 'Navigation' page section appears by default on new SquareSpace sites.  It appears in a side column and contains a 'Links' and 'Login' widget.  The 'Links' widget is rarely used.  The 'Login' widget however is critical because it provides a visible means for users of the site to login.  Otherwise, they would have to know from previous instruction that you must press the [escape] key to login.  The screen area taken up by this 'Navigation' section could be put to much better use by removing it entirely and adding a 'Login' button into the site header.

In addition to adding a 'Login' button, we're also going to add a social sites links bar.  The social bar will be a list of icons for Facebook, Google+, etc on the left with the 'Login' button on the right.  If you only want to add a 'Login'' button then you can easily adapt the instructions and html in this article.

How we are going to do it

We will start by removing the 'Navigation' section from our site layout.  Then we will add the social icons bar and 'Login' button using website code injection points.  SquareSpace layouts don't don't let you modify the default header section without replacing it completely. So we are going to add the html in a code injection point and then dynamically move it into the header using jQuery.  Keep in mind that in order to use code injection points, you must at least have upgraded your Squarespace account to the 'Squarespace Advanced Package'.

Removing the 'Navigation' section from the site layout

Squarespace makes it easy to make changes like this.  What may be unexpected is that by removing the 'Navigation' section, you are also removing the 'Links' and 'Login' pages.  So, if you have any direct links to these pages they will no longer be valid.  Don't worry about removing that 'Login' page - we will be using a different 'Login' page - the one that is used when you hit the [escape] key.

The 'Navigation' section can be removed by logging into your site as the site owner and then clicking on the 'Structure' button in the control bar that appears at the top when you login with the owner id.  This will cause control buttons to slide-out from all of the sections on your page.  You will want to click the 'remove' button on the left side of the 'Navigation' section.  Click, 'confirm' when it asks you to confirm that action.

Add social bar icons images

The social bar icons will need to be uploaded into your website's storage using the 'File Storage' link under the 'Data & Media' section of the links menu that appears when you click on the 'Website Management' button in the website controls toolbar that appears at the top of your site when you are logged in as the website owner.  In our case, we didn't upload an image for the login button because we are simply using the same type of textual button that is used for the navigation links that appear in the header.

Adding social bar html code

Since we want to continue to use the default banner provided by the website theme at the top of our pages, we chose not to use the 'Site Banner HTML Override'.  Doing so would have required us to replace it completely with our own HTML.  Instead, we essentially created our own custom injection point that inserts HTML into the website navigation.  This means that our HTML will be able to size itself and align perfectly with the navigation links regardless of how the links change or the theme is swapped out.

To accomplish this, we'll need to add our HTML and some javascript to one of the existing code-injection points.  I chose to use the 'Post-content HTML (after "content" element)' injection point because it allowed me to add hidden HTML (display: none) into the document which could then be moved dynamically into the website navigation upon page load ($(document).ready()).

Add the following HTML and javascript code to the injection point by clicking on the 'Website Management' link in the site toolbar then clicking on 'Website Settings' under the 'Structure' section of the links menu that appears.  After the 'Website Settings' page loads, click on the 'Code Injection' link that appears in the blank bar that appears near the top of the 'WebSite Settings' page.  This will display a form where you should select 'Post-content HTML (after "content" element)' from the 'Injection Region' dropdown menu.  Then paste the following code into the 'HTML Code' text area.  When complete, click the 'Update Information' button at the bottom.  Remember, that you can always come right back to this page to remove any changes that you have made.

Notice how the HTML div is not rendered on the page until after it has been moved into place by the javascript.  This is achieved by giving the enclosing div an inline style of "display: none" then changing it to "display: block" in the last step of the javascript.  This is how you can make a custom code injection point anywhere in your website.

Also note that we do not include the login button in the social bar HTML.  The login button is added via javascript because we need to dynamically determine the returnURL request param of the login button link upon page load.  We also dynamically determine whether or not we even need to add the login button at all by checking if the current user is already logged in via "Squarespace.Session['isLoggedIn']() == undefined".

Obviously, the social site links and images will also need to be customized to match your personal social sites.

Customize CSS for social bar

The last step is to customize the css on our page so that the login button and social bar are displayed appropriately relative to the site navigation buttons.  This CSS will probably need to be adjusted depending on what theme you are using.  For the Squarespace them used on my site, I needed to make the following css changes:

Summary

In this article, we've learned how to replace our theme's navigation site links section with a social bar and a login button in the header.  In addition to this, we've learned how to use Squarespace's code injection points and even a technique for adding our own custom HTML injection points.  

As always, if you have any questions or remarks regarding this article, I would love to respond to them in the comments below.