Change logo when page scroll

i would realize it by creating the logo as svg.
Shouldn’t be too difficult with fonts and a figurative mark.
Depending on where you want your image mark to appear after scrolling, I would then place it on the left or in the center directly inside the svg, and set the fill-opacity of this group to zero.
Then you can even change the fill-opacity animated with the class header-scrolled.

By the way – what font is it – i found similar fonts – but not exactly the same.
see here : https://enfold.webers-webdesign.de/

does the logo exist in a vector format. svg is one but illustrator etc. too.
We need this.
You don’t need to update – it is pure layout and a bit css.
PS: what is the name of the font
( click the image to enlarge )

if you inspect my logo on that page you see that the xml based notation of a svg graphic is nearby a html programming.
it could have parts like style infos and tags. see 1, 2, 3 i have that “bildmarke” in a group tag and the “letters” in different ones. I can address them with css. so my Groups got ID’s. You see on the inspection – that i set the fill-opacity of that “bildmarke” directly to zero.

This is the look of it all seen without fill-opacity zero inside the svg:

Now i can use the enfold class header-scrolled to switch the visibility.
Css code here is:

.header-scrolled #bildmarke {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

.header-scrolled #name_1,
.header-scrolled #sub_heading {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #bildmarke,
#header:not(.header-scrolled) #name_1,
#header:not(.header-scrolled) #sub_heading {
  transition: 1s all ease;
}

I have now rebuilt this in a quick procedure (very unprecise: Link ). Of course, it is better to have the original layout template. And the font would be good to know, then you can save the part of rebuilding already times. It is only meant as a demo.
Look again at the svg in the DOM.

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}
#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}
#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

and you see each group got his own class – so your can colorize it you like by fill option – and to see the preserveaAspectRatio Effect you had to hamper width shrinking of logo and logo container

#header #miretta .mir0 {
  fill: green
}
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

see example page: https://enfold.webers-webdesign.de/

ok now the font – do you have from the letters an info. …
The Miretta Letters i do not find but we have a good png file of it to vectorize – see your footer.
the Interiors Letter fits well with Mrs Eaves Font.

see now the Logo: https://enfold.webers-webdesign.de/wp-content/uploads/Miretta-Logo.svg

We had one thing to do before you put in as logo file.
Enfold adds this preserveAspectRatio attribute to the logo, because that’s what few people know about svg creation. However, they set it so that x and y value shrink to the left center. But we don’t want to overwrite our statement inside the svg. Therefore Günter set a filter to avoid this overwriting. This comes as a snippet in the child theme functions.php
( if you like to shrink the logo to the left – then you don’t need that snippet – the position of the icon in the middle of the logo will be untouched of that )

function custom_svg_images_get_html( $svg, $attachment_id, $url, $preserve_aspect_ratio, aviaSVGImages $obj_svg_img, $svg_original ){
  $return_default_svg = false;
  if($return_default_svg){
    return $svg;
  }
  return $svg_original;
}
add_filter( 'avf_svg_images_get_html', 'custom_svg_images_get_html', 10, 6 );

#header.header-scrolled #icon {
  fill-opacity: 1 !important;
  transition: 1s all ease;
}

#header.header-scrolled #miretta,
#header.header-scrolled #interiors {
  fill-opacity: 0 !important;
  transition: 1s all ease;
}

#header:not(.header-scrolled) #icon,
#header:not(.header-scrolled) #miretta,
#header:not(.header-scrolled) #interiors {
  transition: 1s all ease;
}

/*** only if you like to see that the logo is shrinking inside its container to the middle ***/
.av-contains-svg, .av-contains-svg svg {
  width: 500px !important;
}

if you inspect the svg ( on mac i do take sublime text for it – on pc i can open it with Notepad ++) there are set inline styles ( similar to html – you can do that with xml too )
Illustrator f.e. will do that too but always name the classes : st0, st1, st2 etc – and all settings for the groups will go to that inline style as classes.
i did for the icon : mir0; miretta : mir1 and interiors : mir2
with these classes you can now set new colors via fill option in your quick css.

why do i like to rename the classes. If you have more than one inline svg on your page – and all have this nomenclature – the last inline svg in the DOM will overwrite the classes with its properties.

PPS: if you checked all that – i will return on my testpage to my own logo again.