Jump to content

What is the code to create a transparent header WITH a carousel banner for the first section of the homepage?

Recommended Posts

Site URL: http://www.vimana.agency


So, Squarespace allows you to use a transparent header with an image background / banner as the first section. It however does NOT allow you to have a transparent header with a carousel of images as the first section / banner (which makes no sense to me)

I have to imagine this would be extremely easy for them to implement as its quite a popular design feature for many sights (e.g restaurants etc)

Can someone please provide me with code or some solution to this? When I put a carousel of imagery for the first section, it automatically makes my header have a background even though it is specific as transparent. I've attached a screenshot, I simply want a transparent header, with a carousel as my first section.

Thank you so much in advance!

Screen Shot 2021-08-25 at 10.34.45 AM.png

Link to comment

You can add some CSS to your page to get the result you want. As this is probably page specific, you should inject this into the pages header (go to Advanced on the page's settings). That requires business/premium though, so if you don't have that, just add a code block on the page somewhere and copy this code in 

  main .page-section:first-child  {
    padding-top:0 !important;

In this case it's relatively easy to override for this use case, but more generally - as someone who has spent years writing software, and working with developers and code every day -  I never like to imagine/guess what's easy to implement or not! It seldom works out that way when writing software. At least they give you the mechanisms to extend via CSS/JS! 🙂

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 3 weeks later...

There's multiple places you can add this sort of code, but they do slightly different things:

  • if you're adding it to advanced CSS (i.e. Design Menu > Custom CSS) you don't put the <style> tags in. but if you do choose this option it will happen on every page. 
  • in my post I suggested that this was worth putting in page settings. So you open the settings for that specific page by clicking the cog icon to the right of the page and then click Advanced and add the code I posted inside there (complete with the <style> tags). 
  • You could also just put a code block on the page and copy the code I posted into that (with the <style> tags).

I have tried it and it does what you asked for, so perhaps you could check that you've used the right option from above?

e.g. this is the code injected via the page header settings





Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.