Transparent header and background image

Hey marsh1984,
Sorry for the late reply and thanks for the screenshots and link.
2: So for your custom footer I’m not sure what size you would like the blue section so as an example I set the color section to “no padding” and it became 100px high because of the button, I then centered the button vertically in the space by adding this css to your Quick CSS:

#av_section_8 > .container {
  min-height: 100px;
  padding-top: 0px !important;
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
}

Please feel free to change the color section padding to suit.
1: I’m not sure where you would like the heading, when the header is transparent the page moves up typically about 116px so the image can be under the header and show though, so for mobile when the header is not transparent everything comes down. So can you explain where you want the “Dry Needling” perhaps centered in the image as it is for mobile?

Best regards,
Mike

Hi,
Thank you for the feedback, the extra space above occurs because the footer page also contains the class avia-builder-el-0 for the first section on the page, and when the transparent header is used it adds 116px top padding so the header looks transparent.
The top color section on your footer page has a min-height of 100px, yet the container doesn’t have the height. That is why in the css above we gave the container the matching height and centered it vertically.

So on your footer page I give the first section a custom ID and then edited your css to this:

#custom_footer > .container {
  min-height: 100px;
  padding-top: 0px !important;
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
}

I checked pages that had both transparent headers and not, and the footer seems to be the same now, please clear your browser cache and check.

Best regards,
Mike