Phone Number above Squarespace 7.0 Navigation

This is a custom feature that is asked for quite a bit. A lot of small businesses would rather their clients/patients call them to schedule appointments or consultations instead of email. Let’s get started, shall we!

Update: This is for Squarespace 7.0. View tutorial for 7.1 here!

---

A couple notes to get started:

• You’ll need at least a Business plan on Squarespace, because you’ll need access to the Custom CSS section of your site.

• Some working knowledge of CSS will be helpful, but not necessary.

• I have not tested it on any other templates, these are only for the Bedford and Brine families.

Bedford Tutorial:

1. Open the Design section of your site. Click on Custom CSS.

2. Paste the code below.

   @media only screen and (min-width: 768px) {
   .nav-wrapper:before {
   display: block;
   content: 'Call Today XXX.XXX.XXXX';
   right: 60px;
   padding: 5px 0;
   font-family: Nimbus-Sans;
   font-size: 26px;
   font-weight: 700;
   color: white;
   text-transform: uppercase;
   }}

3. You can edit any of the text inside the apostrophes after content. As well as font-family, font-size, font-weight, color, and text-transformation.

4. Make sure to save!

Brine Tutorial:

Open the Design section of your site. Click on Custom CSS.

1. Paste the code below.

   @media only screen and (min-width: 768px) {
   .Header-nav-inner:before {
   display: block;
   content: 'Call Today XXX.XXX.XXXX';
   right: 0px;
   padding: 10px 15px;
   font-family: Oxygen;
   font-size: 26px;
   font-weight: 700;
   color: white;
   text-transform: uppercase;
   }}

2. You can edit any of the text inside the apostrophes after content. As well as font-family, font-size, font-weight, color, and text-transformation.

3. Make sure to save!

Please let me know if you have any questions or comments below!