Jump to content

Code injected into header appears behind header

Recommended Posts

Site URL: http://www.someoneswebsite.com


I'm trying to add a Spotify Follow button to my header. When I inject the iframe into my header it appears behind the header and there is a white line beneath my header. It's as if the actual header of my site is a custom thing from the page that slides over the spot where the header should be. If I scroll up and down it shows the Follow button pinned to the leftmost corner before disappearing behind the header. I've attached screenshots for clarity (the site should have an all black backgrond, not this white line there).

Anyone have an idea? Could it be the template I'm using? I've tried the z-index and changing some of the iframe settings but to no avail.

Schermafbeelding 2021-04-25 om 10.18.03.png

Schermafbeelding 2021-04-25 om 10.18.02.png

Schermafbeelding 2021-04-25 om 10.18.00.png

Schermafbeelding 2021-04-25 om 10.17.46.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

And to answer my own question: you have to put this code in the Footer section. The description is very misleading. It used to say "add this code before the </body> tag" but now it says "Enter code that will be injected into the template-defined footer on every page of your site". THIS IS NOT TRUE!

Code added here is put in the <body> tag. You can then use the custom CSS to place the code where you want on the page. Unfortunately I have to use "position: fixed" to place it on top of the header but it works for now. Would be great if the squarespace team would make this easier.

Link to comment

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.