Adding text to the Site Header

I would like to add two lines of text to the top right of the site header to appear on every page of the website. SquareSpace support says this is not possible with their system other than through custom CSS. 

I wish to add a telephone number and email address to appear in white text. 

This is what appears at the moment:

And this what I would like to appear:

Preferably in bold white text (and if possible for the email address to be clickable). 

Is this possible? If it is I would be grateful for what code it is necessary to add (and whether it is added at Settings -> Developer tools -> Code Injection -> Header).

I have now come across this post, which provides CSS to add text to the header. 

Adapting it: 

header:before {
  content:'999999999 \a email@address.com';
  white-space: pre;
  color: #FFFFFF;
  font-weight: bold;
  text-align: right;
  display: block;
  position: absolute;
  right: 30px;
  top: 30px;
}

But although the text does appear in the header, it is overwritten/hidden almost immediately by the black/dark background of the rest of header. When going to a page the added text appears and then is hidden by the rest of the header. 

Is there a solution to this? Any help would be very gratefully received.

(I know now too that the code added to Design -> Custom CSS.)

What is your site url? We can check code easier

Thank you for your response. 

The URL: coconut-tambourine-35ft.squarespace.com.

16 hours ago, vw-notary said:

Thank you for your response. 

The URL: coconut-tambourine-35ft.squarespace.com.

 

Your site is private. Can you setup an access password?

Thank you for your response. 

Password: vwnp-visibility

The URL: coconut-tambourine-35ft.squarespace.com.

Perhaps as 2 Nav Items - Could you let me know how it is possible to do this? As SquareSpace support indicated that what I would like to do is not possible  other than through CSS code. 

On 7/3/2023 at 2:34 PM, vw-notary said:

Perhaps as 2 Nav Items - Could you let me know how it is possible to do this? As SquareSpace support indicated that what I would like to do is not possible  other than through CSS code. 

The site is expired. You can access this link to extend it for free first

I have extended the trial. 

This code with move last 2 items to Right of Header. Add to Design > Custom CSS

nav.header-nav-list>div:nth-last-child(-n+2) {
    position: absolute;
    right: 0;
    top: -5px;
}

nav.header-nav-list>div:last-child {
    top: 15px;
}

I would like to use the code to add the text "Est. 1932 - Ely, Iowa" to the area to the right of my logo where I put the black line  in the photo. Can anyone help me with that code?

On 9/7/2024 at 4:36 AM, ElyFire said:

I would like to use the code to add the text "Est. 1932 - Ely, Iowa" to the area to the right of my logo where I put the black line  in the photo. Can anyone help me with that code?

You mean this position? Can you share site url?

I'd like to like in the photo attached.

https://lynx-grasshopper-n3b9.squarespace.com/

Elyfire52227

On 9/11/2024 at 1:17 AM, ElyFire said:

I'd like to like in the photo attached.

https://lynx-grasshopper-n3b9.squarespace.com/

Elyfire52227

Use code to Website Tools > Custom CSS

div.header-title a:after {
    content: "Est. 1932 - Ely, Iowa";
    font-size: 18px;
    color: #000
}

div.header-title a {
    display: flex;
    align-items: flex-end
}