Jump to content

Making header and footer of home page transparent

Recommended Posts

  • Replies 13
  • Views 2.7k
  • Created
  • Last Reply

Top Posters In This Topic

Replace what you have in Page Settings > Advanced > PAGE HEADER CODE INJECTION with the following.

<script src="https://kit-pro.fontawesome.com/releases/latest/js/pro.min.js" data-auto-a11y="true" data-auto-fetch-svg="" data-fetch-svg-from="https://kit-pro.fontawesome.com/releases/latest/svgs"></script>

<script src="https://content1.getnarrativeapp.com/ss-ajax-loader.js"></script>

<style>

  [data-section-id="5f56a4f67d0bb54905c6b3b8"] .section-background {
  
    top: 0 !important;
    
    }
    
  </style>

This should accomplish what you want on the home page as far as the header goes.

As to the the footer I don't have a solution at this time.

Let us know how it goes.

Edited by creedon
version 2 of CSS

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

one more question. how would i make these changes to every page's header on my sight. I tried injecting it in advanced css settings onto the about page but it isn't working. I'm assuming because the code id number is incorrect for that page. I've just been having trouble finding it in the Page source code. Thank you.

Link to comment

If you want the effect site-wide add the following to Design > Custom CSS.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .black .header-nav-folder-content {

  background-color: transparent;
  
  }

#footer-sections, #header {

  background-color: transparent;
  
  }

It basically the same code as above minus the selectors that make it specific to a particular page.

Edited by creedon
version 2 of CSS, added transparent background for rates

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...

Hi, everyone, 

I am trying to add social links at the bottom of the homepage (just before the background video ends), but I would like my social link to have the same background as the video in my section. I tried injecting codes to make the footer background transparent but nothing is working. I wonder if any can help out.

leonardocampaner.com
pass: leonardo

Link to comment
On 4/11/2021 at 5:40 PM, vcampaner said:

Hi, everyone, 

I am trying to add social links at the bottom of the homepage (just before the background video ends), but I would like my social link to have the same background as the video in my section. I tried injecting codes to make the footer background transparent but nothing is working. I wonder if any can help out.

leonardocampaner.com
pass: leonardo

Hi. It looks like you solved this?

image.thumb.png.927201ca0739ebe80d0e18e2c51668bc.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/17/2021 at 9:29 AM, tuanphan said:

Hi. It looks like you solved this?

image.thumb.png.927201ca0739ebe80d0e18e2c51668bc.png

first of all thank you for being so kind. I am trying to move the social links at the very bottom of the page, but keeping them on top of the video. I am not able to do it by adding blank spaces on the section it self it modifies the dimensions of the sections. 

do you know how? 

 

Link to comment
  • 1 year later...

Hi there, 

I'm trying to figure out how to have the footer be transparent on my home page at the gallery slideshow.

Site: www.studioalphainteriors.com

Right now I have my header transparent but I'd also like to add the footer to be transparent as well. 

Thanks so much.

Edited by atheofanidis
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.