Making header and footer of home page transparent

Site URL: http://www.andersonair.org

I just need to know how and what css code to inject into my advanced settings in order for my header and footer to be transparent. im a self learned coder still trying to figure out things. thank you!

#footer-sections, #header {

  background-color: transparent;

  }

i also want the header/footer to be transparent over the images i have on the home page. 

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.

It worked man thank you!!!!!!! yall are freaking awesome!!!

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.

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.

YOU ARE THE MAN! THANK YOU

Last question about this, how do i make my rates drop down menu transparent as well?

I updated both previous posts with CSS in them. Update what I gave you previously and lets see if everything is looking good.

Let us know how it goes.

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

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?

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

Hi. It looks like you solved this?

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? 

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.