Jump to content

Transparent Fixed Footer

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I thought your site is 7.1.

Use this new code

/* Footer transparent */
body.homepage footer.Footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background-color: transparent !Important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 10 months later...
On 4/26/2023 at 9:41 AM, ellipon said:

Hi @tuanphan ! 

Working in 7.1

Have tried the above code and some others floating around the internet and can't seem to get the transparent background to work (fixed footer works no problem). Any thoughts? 

site url: https://ukulele-chiton-zbz6.squarespace.com/
pass: sqspace

Thanks!

Change last code

body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

to this

body.homepage footer.sections section, body.homepage footer.sections .section-background, body.homepage footer.sections .section-border  {
    background: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 10/11/2023 at 3:25 AM, JacobRosenvinge said:

This code has helped me great - but is only working on the frontpage.

Is it possible to make it work on all pages?

Just remove body.homepage from the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

Just remove body.homepage from the code

Sorry for being a newcomer here... I removed body.homepage from the code - but now its not working at all...

What did i do wrong?

 

/* Footer transparent */
 {
    position: relative;
}
 footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
 footer.sections section,  footer.sections .section-background,  footer.sections .section-border  {
    background: transparent !important;
}

Link to comment
On 10/13/2023 at 6:24 PM, JacobRosenvinge said:

Sorry for being a newcomer here... I removed body.homepage from the code - but now its not working at all...

What did i do wrong?

 

/* Footer transparent */
 {
    position: relative;
}
 footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
 footer.sections section,  footer.sections .section-background,  footer.sections .section-border  {
    background: transparent !important;
}

You should stay the body. You can remove (.homepage). 

Screenshot_245.png

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • 2 weeks later...

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.