Jump to content

How can I add a sticky header with a phone & email?

Recommended Posts

I need to add a sticky header to my site with a phone number & email address. I want to be able to have them interactive so on mobile you can easily call the phone number.

I have added this code:

<!DOCTYPE html>
<html>
<header>
<style>


header{
  color: white;
  text-align: center;
  background-color: #8bbeee;
  font-family: poppins;
  font-size: 20px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  width: auto;
  margin: auto;
  word-spacing: 20px;
  padding: 2px; 20px; 10px; 20px;
  }


</style>
</header>
<body>

<header>Contact: 405-375-3128 or kfepatients@pldi.net</header>

</html>

 

However, now it overlaps my Squarespace Header on mobile and I still do not know how to add the phone or email links.

Edited by Jaryn
adding code
Link to comment
  • Replies 3
  • Views 629
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.