Does your background-image scroll or is it set to fixed?
(Edit : i ask – because there will be a solution if it is set to scroll.)

_____

But however it will be easier to blur it in a graphic programm and upload that blurred image.

Hallo Tobias : das wird mit dem Sliden ein Problem – denn das ist irgendwie auf Overflow: hidden angewiesen.
Eventuell kannst du mit faden ja zufrieden sein:
Das wäre hier so ein aufbau:

Color-Section : 1/1 container darin – dort dann einen easy slider platziert:
Der Color-Section gab ich eine benutzerdefinierte Klasse.

.slideshow-test .avia-caption {
    position: absolute;
    left: 60%;
    z-index: 50;
    top: 0;
    width: 40%;
    height: 100%;
    padding: 30px;
}

.slideshow-test .avia-slideshow li img {
    display: block;
    width: 60%;
    margin: 0;
    border-radius: 3px;
    position: relative;
}

.slideshow-test .avia-slideshow li  {
    z-index: 10 !important;
}

.slideshow-test .avia-slideshow-inner::before {
    content: "";
    background-color: #f9be46;
    width: 40%;
    height: 100%;
    z-index: 10;
    position: absolute;
    right: 0;
}

.slideshow-test .caption_framed .slideshow_caption .avia-caption-content p, 
.slideshow-test .caption_framed .slideshow_caption .avia-caption-title, 
.slideshow-test .avia-caption .avia-caption-content p, 
.slideshow-test .avia-caption .avia-caption-title {
    background: none;
    display: inline-block;
    margin: 0 0 1px 0;
    padding: 10px 15px;
}

https://webers-testseite.de/tobiasp/
aber: du siehst, dass der responsive Fall natürlich ein Problem darstellt. Bei Viel Text in der Caption.
Und das Laden nicht so gelingt ohne den Übergang zu vermeiden. Daher bleibe ich mal dran an dem Thema.
Ich muss mich da wohl oder Übel einlesen in “mutationobserver”

Ich habe hier mal eine Anfrage, dass wäre sicherlich eine Lösung: https://kriesi.at/support/topic/bind-event-to-slide-change/

• This reply was modified 5 years ago by Guenni007.

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?

Remove all your settings on that and try :

@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;
  }
  

  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    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;
  }
}

No i can’t : because i’m participant as you – so if there are different links in private content – i do not see them.
On your link above i only the the Maintenance Mode Page

Maybe you can look to the enfold options : header – extra elements – Header Social Icons : and set it to “Display in main header area”
_______
By the way: Even if GB is no longer part of the European Community – you must comply with the GDPR.
Every page with links or share the identity of the site owner (even a phone number is sufficient) must have an imprint and a privacy policy page.

Many of the “Under Construction” sites make the mistake of providing contact information and fall into the legal trap

Hallo Tobias – is there a page i can see as a participant too?
Your page link above goes to an answer of mine – so maybe i got an idea.

have a look here : https://webers-testseite.de/sticky-sidebar/
the code – and instruction is there.
and similar to that : https://webers-testseite.de/sticky-elements/

Does it work as you like to have it?
Your site is only available with the front-site for non logged-in users.

this was an existing site and i only changed logo etc. for your setting on one page.
i added some menu points and gave a submenu to home.

The page should show you that it can be done with svg ( and i do not adjust the rest on that site – it is only a testpage – that menu and submenus are working with that logo constellation )

no – Safari won’t support this – hm let me think about that problem a while

i think we won’t be able to get around converting your logo to svg, and setting the link via svg. ( SVG Shapes )

if you got a svg file – please post the link to it.
Or tell me what font you have used in your logo

• This reply was modified 5 years ago by Guenni007.

yes but the link of demicoli00 is something different- it shows how to have icons before a list of tel, email, location etc. f.e. in the footer widget or on top in phone-info field:

what you are showing is a normal Advanced Layout Element : Icon List
Click on the Icon List Element – click on one Element in the list and on that new popup you can choose the icon you like.

On that linked page above i can see your icons.
But if you got trouble on a different page see: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

• This reply was modified 5 years ago by Guenni007.

And one important thing: you can use the filter with conditional tags only for some pages.
If these settings are in contrast to the settings of your Enfold Options – you might remove some classes from the header then.

Well you can use the filter: avf_header_setting_filter
one thing to think of is in the original comment of that source code part:
//create a header class so we can style properly

put this to your child-theme functions.php :

add_filter('avf_header_setting_filter', function($header) {
	$header['header_transparency'] = 'header_transparency';
	$header['header_class'] .= " av_header_transparency";
	return $header;
}, 10, 1);