Text goes behind transparent header on mobiles

Hi, I just changed my mobile header to transparent, but after I did this any text I had in color sections below jumped up and moved under the header, so the logo and menu overlap and sit on top? Please see screenshot.

I tried code from other posts to add padding to the logo I also tried adding margin and padding to bottom of the mobile header like this

@media only screen and (max-width: 768px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
padding-bottom:  50px important;
 margin-bottom:  50px important;
  }
 }
}

but nothing worked.

In the end I had to hack it by creating a custom class and adding massive padding-top to the special headings,

.mobileheaderfix .av-special-heading-tag{
padding-top: 75px !important;
}

but this is not ideal and more work as I have to add it to all headings on all pages.
Is there just one class or bit of code I can simply just add to the mobile header instead?
Many thanks