Hello Pixel

View Original

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!