look at your quick css there is a rule:

#top .no_margin.av_one_fourth {
 padding:2px;
}

you have set instead of a closing an opening curly bracket!

Next : you have an opening media querry :

@media screen and (max-width:450px) {

but it does not close – go and have a look what rules must be surrounded by that media-query

you like to load fontello icons locally – but not from cdn?
where do you load your other fonts? from cdn?
did you see the option field on Performance – “Custom Font loading source” – there is an option to load fonts from cdn

but first you had to check the mark: “Show Advanced Options”

please go to that example page and search for : web
( that example page is an enfold page ( at 5.6.3 ) –
https://webers-testseite.de/

what is the permalink for search-results page ?
it is: https://webers-testseite.de/suche/web

Is there a page we can see?
It would be easier to advise you if we could see the page.

__________________

the overflows are important to set – as you do it.
but on the image ( svg ) you had to calculate the max-height and height – and it is important to set the height in relative values.
so have a look what is the starting height of your header: f.e. 100px
but you like to have the logo at 150px. ( this should be the max-height) – 150px are 150% of the start height – that will be your height definition:
If you set it as relative value it will follow the shrinking of your header.

.logo img {
  height: 150%;
  max-height: 150px !important;
}

That was what you meant?

Step 3
– create a file inside heading’s folder called heading.php and paste the code in private content.

Is there any reason for not make it public? I like to learn from other coding skills ;)

If I understand you correctly, you want to create this Accordion Slider once, and then embed it several times in different pages/posts. It should then change with the one created page on all others.

Go and test if it fits your needs if you place that accordion slider on a single page and nothing else – name that page as you like.
click to see that page with two variations:

On the other pages/posts insert that page with alb : page content – choose your page with that accordion.

PS: if you like to insert that accordion to pages/posts with sidebar your insertpage must have the accordion slider in a 1/1 column ( Variant : B ) but without fullwidth elements ( color-sections, grid-row)

here in my case i named that page my-accordion:

can you try to set it as defintion between your enfold options breakpoint and the new one
f.e. as:

@media only screen and (min-width: 990px) and (max-width: 1300px) {
…

or do you have a setting for header left or right? – but even then – it has to work this way you have on top in your code.
PS : i tested it on a Enfold 5.6.3 – it works with your code too.

Is there a page we can inspect?

maybe the setting which page is choosen for that 404 page preserves in the background – allthough the first setting is switched back to : “no custom 404….

try …

u bent van harte welkom

ich persönlich bearbeite die svgs nach in einem guten Texteditor. Dort tausche ich dann durch “suchen und ersetzen” die klassen aus und setze wenn nötig noch Gruppen Identitäten.

I personally edit the svgs in a good text editor. There I replace the classes by “search and replace” and set group ID’s if necessary.

do you have entered this snippet to your child-theme functions.php ?

from docu: Link

From within your child theme, you may want to add or edit an Advanced Layout Builder element. To do so, first add the following function to your child theme’s functions.php: …
Now add a new folder in your child theme directory called shortcodes. If you copy an element from enfold>config-templatebuilder>avia-shortcodes to this folder it will replace the one in the parent and be used instead. You can also add new ones using the other shortcode elements as examples.

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

and just put the edited alb element directly to that subfolder : shortcodes

This is a problem of adobe illustrator – they do alway set the same classes ( st0, st1 etc. )
I do open these svgs in a good texteditor – and change those class names to something different – but be carefull – you had to think of not to change only in the styles but also in the path etc. the class=”st0″ etc.

PS : if you go and Group inside Illustrator the parts of your logo – and name these Groups – these Names became ID’s in the svg code.

you can have your own grapic-styles on : goto Window – Graphic Style ( Fenster – Grafikstile ) create a new one:
then the classes are named that new style ( and not st1, st2 etc )

Next tip: if you only want to change a fill color inside an inline svg – you do not need to upload a different logo. That is one of the big advantages of inline svg. you can select that group or class by quick css. So just use one logo – and on transparency change the fill color by css – or after scroll.

f.e.:

#header.av_header_transparency .st0 {
  fill: red !important;
}

That snippet should handle both – if you do not see it – refresh all cachings / merged files – and browser cache too.

if that does not work – we had to give a custom-class to the anchor link itself: no-scroll
but to be more selective a custom class on those parent container would be helpfull.

But before testing: How did you initialize the modal opening of the hidden section?
Edit : aha – i see …

what kind of php version is installed? because if php 8.x. (comes with jQuery 3.x ) look to your inline popup script and replace those deprecated functions. – f.e:

jQuery(window).load(function() {
//replace with:
jQuery(window).on('load', function(){

under that line add :

jQuery('.conditional_popup_link a, .popup_link a, .inline_popup, .avia-buttonrow-center.spaced-between a[href^="#"]').addClass('no-scroll');

auf screenweiten kleiner als 768 px ist der Hamburger Button in geöffnetem Zustand rot – daher nocht folgendes:

@media only screen and (max-width:767px) {
 .av-burger-overlay-active #top .header_color .av-hamburger-inner,
 .av-burger-overlay-active #top .header_color .av-hamburger-inner::before,
 .av-burger-overlay-active #top .header_color .av-hamburger-inner::after {
  background-color: #FFF
 }
}

und den einen selctor müssen wir auch selectiver machen:

.responsive.av-burger-overlay-active #top #wrap_all .av-logo-container a .language_flag img {
 outline:2px solid #FFF
}