Header is not sticky at bigger mobile screens / smaller tablets, transparency

for the non transparent header sites you have to get rid of:

.responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 0 !important;
    margin: 0;
}

and maybe you decide not to have the centering of the logo on responsive case too:

@media only screen and (max-width: 989px) {
	.html_header_top.html_logo_center .logo {
		left: 0;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}

zunächst einmal : Du schreist mich nicht wirklich an – oder ? Nichts Anderes ist es wenn man in Foren Alles in Großbuchstaben schreibt ;)

Also wenn Du bitte zunächst das mal umsetzt und auch kurz dann so lässt, dann kann man eventuell auch den Rest noch erledigen.

Dann wäre es hilfreich, du würdest für die Zeit des Layouts das Merging abstellen. Zumindest das vom CSS – dann sieht man auch schneller wo andere Einstellungen mit hineinspielen.

Das Logo muss die Möglichkeit haben bei sehr kleinen Screenweiten auf den verbleibenden Platz zu reagieren; oder du musst um für alle Screenweiten die gleiche Größe zu haben – Auch für breitere Screens ein Kleineres Logo in Kauf nehmen.
Das Logo hat am Anfang ungefähr eine Weite von 400px – wie willst du das ohne Veränderung in eine Screenbreite von 375px inclusive dem Hamburger-Menü und Padding sonst unterbringen?

Versuche jetzt bitte mal das hier:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  #header_main {
    border: none;
  }
  
  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: rgba(255,255,255,0.6) !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    max-height: 80px !important;
  }
  
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

teste es geren mit dem rgba(255,255,255,0.3) aber du wirst sehen, dass etwas weniger Transparenz besser aussieht. Das ist aber Dir überlassen.

______________________
first of all : you are not really shouting at me – are you ? Nothing else is it if you write everything in capital letters in forums ;)

So if you please put this into practice and leave it like this for a short time, then you might be able to do the rest.

Then it would be helpful if you would turn off the merging for the time of the layout. At least that of the CSS – then you can see more quickly where other settings play a role.

The logo has to be able to react to the remaining space on very small screens; or you have to accept a smaller logo to have the same size for all screens – even for wider screens.
The logo has a width of about 400px at the beginning – how else do you want to fit this into a screen width of 375px including the hamburger menu and padding without changing it?