Transparent Fixed Footer

Site URL: https://lettuce-azalea-k7l4.squarespace.com/

Hi! I am trying to get my footer to adopt the background of the page and also have it be fixed.

Is this possible since the footer is its own block?

I am trying to practice recreating this site in Squarespace: https://toqa.tv/

This is mine: https://lettuce-azalea-k7l4.squarespace.com/ (pw: footerhelp)

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;
}

Hi @tuanphan I added that, but it didn't seem to do anything for the homepage. Am I missing something?

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;
}

Awesome! Thank you so much! That worked!

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!

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;
}

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

Is it possible to make it work on all pages?

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

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;
}

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). 

Thanks for helping me through!

Hi, I'd also like my footer to be transparent on all pages to follow colour of each page. I'd tried implementing code 7.1 without .homepage but it doesn't seem to work, instead it tweaks other elements of the footer but not the background colour to tranparent as desired. Any help would be appreciated site URL is landerse.au

On 3/23/2024 at 12:59 PM, hannahnowlan said:

Hi, I'd also like my footer to be transparent on all pages to follow colour of each page. I'd tried implementing code 7.1 without .homepage but it doesn't seem to work, instead it tweaks other elements of the footer but not the background colour to tranparent as desired. Any help would be appreciated site URL is landerse.au

What is password?

Hi @tuanphan 

Password: red

On 3/29/2024 at 3:48 PM, hannahnowlan said:

Hi @tuanphan 

Password: red

Use this CSS code

/* 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;
}
 body.homepage .section-border * {
     opacity: 0;
 }

Thanks @tuanphan this code works great.

Do you have a similar code to target specific footer sections on other pages (not the homepage) transparent too?

On 4/1/2024 at 4:26 PM, hannahnowlan said:

Thanks @tuanphan this code works great.

Do you have a similar code to target specific footer sections on other pages (not the homepage) transparent too?

You can remove

.homepage

from the code

Hi, I am wanting to make the footer transparent on my home page over the gallery, I have done this already for the header. I have tried the above with no result.

I would also like the burger menu to be full screen on the mobile but still half on the desktop?

https://bellflower-opossum-txyn.squarespace.com/
studionh_nh

23 hours ago, maboli said:

Hi, I am wanting to make the footer transparent on my home page over the gallery, I have done this already for the header. I have tried the above with no result.

I would also like the burger menu to be full screen on the mobile but still half on the desktop?

https://bellflower-opossum-txyn.squarespace.com/
studionh_nh

Use this new code

/* 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, body.homepage footer.sections .section-border {
    background: transparent;
}
 body.homepage .section-border * {
     opacity: 0;
 }

Perfect! Any ideas on the mobile menu code, so it's full screen on mobile but still half on desktop?

On 7/22/2024 at 2:53 PM, maboli said:

Perfect! Any ideas on the mobile menu code, so it's full screen on mobile but still half on desktop?

You can use this CSS code

@media screen and (max-width:767px) {
div.header-menu {
    margin: 0 !important;
    width: 100% !important;
}
}

Perfect, thank you

I have added a white logo to the menu with the following code. Is there a way that I can edit this so it only on the mobile view?

 

/** Menu Logo When Open**/
.header-title-logo a{
  position:relative;
  &:after{
    background-image:url(https://static1.squarespace.com/static/6697dd31c001b32289c1f3e7/t/66a8ac24c8dbe25f3abe719f/1722330148130/StudioNH_Logotype_White.png);
    opacity:0;
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center center;
    transition: opacity .3s ease;
  }

  body.header--menu-open &:after  {
    opacity:1;
  }
  body.header--menu-open & img  {
    opacity:0;
  }
}

On 7/30/2024 at 11:07 PM, maboli said:

I have added a white logo to the menu with the following code. Is there a way that I can edit this so it only on the mobile view?

 

/** Menu Logo When Open**/
.header-title-logo a{
  position:relative;
  &:after{
    background-image:url(https://static1.squarespace.com/static/6697dd31c001b32289c1f3e7/t/66a8ac24c8dbe25f3abe719f/1722330148130/StudioNH_Logotype_White.png);
    opacity:0;
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center center;
    transition: opacity .3s ease;
  }

  body.header--menu-open &:after  {
    opacity:1;
  }
  body.header--menu-open & img  {
    opacity:0;
  }
}

Change your code to this

@media screen and (max-width:767px) {
/** Menu Logo When Open**/
.header-title-logo a{
  position:relative;
  &:after{
    background-image:url(https://static1.squarespace.com/static/6697dd31c001b32289c1f3e7/t/66a8ac24c8dbe25f3abe719f/1722330148130/StudioNH_Logotype_White.png);
    opacity:0;
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center center;
    transition: opacity .3s ease;
  }

  body.header--menu-open &:after  {
    opacity:1;
  }
  body.header--menu-open & img  {
    opacity:0;
  }
}
}