Contact Us Sidebar

What does this code do?

This code snippet will allow you to a secondary navigation to your website that contains links to contact you.

Note 1: To help your site stay mobile friendly, the sidebar will turn into a regular block in your footer when on mobile.

Note 2: The background colour of the sidebar will be the body colour of your website.

Code Snippets

This code snippet uses Font Awesome for the icons. To use Font Awesome, you will need to copy and paste your personal 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.

<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Copy and paste the following into a code block to your footer. This is where your contact links will be when viewed from a mobile device.

<div id="left-sidebar">
  <div id="left-sidebar-content">
    <p>
      Contact Us
    </p>
    <div id="left-sidebar-line"></div>
    <ul>
      <li>
        <a target="_blank" href="mailto:EMAIL HERE">
          <i class="fa fa-envelope-o"></i>
        </a>
      </li>
      <li>
        <a target="_blank" href="tel:NUMBER HERE">
          <i class="fa fa-phone"></i>
        </a>
      </li>
      <li>
        <a target="_blank" href="GOOGLE MAP LINK">
          <i class="fa fa-map-marker"></i>
        </a>
      </li>
    </ul>
  </div>
</div>

Replace “Contact Us” with the words you would like to be displayed. Then replace EMAIL HERE and NUMBER HERE with the correct information.

Go to Google Maps and search your address. Then click “Share” and copy the link. Replace GOOGLE MAP LINK with the link you created in Google Maps.

Squarespace 7.0

Copy and paste the following into Design > Custom CSS to put the sidebar on the left.

/* Social Link Side Bar */
#left-sidebar {
  text-align: center;
}

#left-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  .Content-outer {
    margin-left: 8vw; /* pushes content out from under sidebar */
  }
  #left-sidebar {
    position: fixed;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    left: 0px; 
    bottom: 0px;
    display: table;
  }
  #left-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #left-sidebar-line {
    background: #555; /* colour of the line */
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #left-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
    min-height: 10vw;
    text-align: right;
    color: #555 /* Colour of the text */
  }

  #left-sidebar ul {
    margin: 0px;
    color: #555 /* Colour of the icons */
  }
}

@media only screen and (max-width: 640px) {
  #left-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #left-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Copy and paste the following into Design > Custom CSS to put the sidebar on the right.

/* Social Link Side Bar */
#left-sidebar {
  text-align: center;
}

#left-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  .Content-outer {
    margin-right: 8vw; /* pushes content out from under sidebar */
  }
  #left-sidebar {
    position: fixed;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    right: 0px; 
    bottom: 0px;
    display: table;
  }
  #left-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #left-sidebar-line {
    background: #555; /* colour of the line */
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #left-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
    min-height: 10vw;
    text-align: right;
    color: #555 /* Colour of the text */
  }

  #left-sidebar ul {
    margin: 0px;
    color: #555 /* Colour of the icons */
  }
}

@media only screen and (max-width: 640px) {
  #left-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #left-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Squarespace 7.1

Copy and paste the following into Design > Custom CSS to put the sidebar on the left.

/* Social Link Side Bar */
#left-sidebar {
  text-align: center;
}

#left-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  #siteWrapper{
    margin-left: 8vw; /* pushes content out from under sidebar */
  }
  #left-sidebar {
    position: fixed;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    left: 0px; 
    bottom: 0px;
    display: table;
  }
  #left-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #left-sidebar-line {
    background: #555; /* colour of the line */
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #left-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
    min-height: 10vw;
    text-align: right;
    color: #555 /* Colour of the text */
  }

  #left-sidebar ul {
    margin: 0px;
    color: #555 /* Colour of the icons */
  }
}

@media only screen and (max-width: 640px) {
  #left-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #left-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Copy and paste the following into Design > Custom CSS to put the sidebar on the right.

/* Social Link Side Bar */
#left-sidebar {
  text-align: center;
}

#left-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  #siteWrapper{
    margin-right: 8vw; /* pushes content out from under sidebar */
  }
  #left-sidebar {
    position: fixed;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    right: 0px; 
    bottom: 0px;
    display: table;
  }
  #left-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #left-sidebar-line {
    background: #555; /* colour of the line */
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #left-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
    min-height: 10vw;
    text-align: right;
    color: #555 /* Colour of the text */
  }

  #left-sidebar ul {
    margin: 0px;
    color: #555 /* Colour of the icons */
  }
}

@media only screen and (max-width: 640px) {
  #left-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #left-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Customize the Icons

Change the Icon

The following code sets the icon. Go to Font Awesome and find the icon you want to use. Click on the icon and copy and paste the class for that icon in place of fa fa-envelope-o.

class="fa fa-envelope-o"

Animate the Icon

To learn how to animate the icon, click here.

Resize the Icon

Go to the Font Awesome Size Guide to see your size options.

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the Code Block to contain your information.

3. Edit the Custom CSS to style the size and colour of the sidebar. Note that the background colour of the sidebar will be the body colour of your website.