yes – now it works well. so do not change now your setting.
but keep in mind that svgs are a mighty image format – you can influence from outside by css. And often much smaller in file-size and with maximum sharpness.

PS: if your Logo could be changed a bit – ( like i do ) it would be nice to easier identify the “plant” as the missing “i” in Griegos.
We as layout-savvy users see this immediately, but a normal visitor to the site may not.

if you like to hide it only for real mobile devices ( and not for all small screens ) you can use that class – enfold added to the document ( html ) for mobile devices: avia_mobile

  .responsive.avia_mobile #footer,
  .responsive.avia_mobile #socket {
    display: none;
  }

and if you like to allow for “mobile Devices” with big screens tablets etc. (ipad…) use a combination of both.

@media only screen and (max-width: 767px) {
  .responsive.avia_mobile #footer,
  .responsive.avia_mobile #socket {
    display: none;
  }
}

try to modify this to your needs:

    (function($) {
        $(document).ready(function () {
            if (window.innerWidth > 989) {
                var header = $('#header');
                var main = $('#main');
                var burger = $('.html_header_sidebar #top div .av-burger-menu-main');
                var footer = $('.html_header_sidebar.html_header_left .av-curtain-footer.av-curtain-activated .av-curtain-footer-container');
                var menu = $('.responsive.html_header_sidebar #header .av-main-nav > li').not('.av-burger-menu-main, .av-active-burger-item');

                $(window).scroll(function () {
                  if ($(this).scrollTop() > 200) {
                    burger.show();
                    menu.hide();
                    header.css({'width': '120px', 'transition': 'all 1s ease'});
                    main.css({'margin-left': '120px', 'transition': 'all 1s ease'});
                    footer.css({ 'width': 'calc(100% - 120px)', 'margin-left': '121px'  });
                  } else {
                    menu.show();
                    burger.hide();
                    header.css({'width': '300px', 'transition': 'all 1s ease'});
                    main.css({'margin-left': '300px', 'transition': 'all 1s ease'});
                    footer.css({ 'width': 'calc(100% - 300px)', 'margin-left': '301px'  });
                  }
                });
            } 
          });
    })(jQuery);

and you had to find a solution for the opened hamburger then yourself. trying to find a solution for paddings on the hamburger ul
and – because of the new existing place for main some alb elements are not willing to go with that. F.e. on : https://kriesi.at/themes/enfold-photography/blog/ i can see in developer tools that there wasn’t a recalculation on masonry styles. And you had to find a way to close the hamburger menu when scrolling back to top position.

It works fine for me in Firefox now that Mike has made some changes.
But why make life so difficult for yourself? A very slim plugin like Page Scroll to ID does this very elegantly. For example, you can not only specify an offset, but even an offset scroll position in the form of a selector: #header. This makes perfect sense for our shrinking header. But what I really like is the ability to navigate to an anchor on another page. This can be set so that the page opens at the top and then scrolls to the anchor after an (adjustable) delay.

First – i think you have uploaded the whole downloaded archive from google to enfold. Because only the static font-styles are seen – and they are registered as “static” font.

Next: do you really need all those font-weights ? form 200 to 900 and italic too?
for most websites it is sufficient to offer only 300, 400 and 700.
Hint: as you can see here on a post of mine for a lot of fonts it is o.k. to use the browser way to render italic fonts.
https://kriesi.at/support/topic/host-web-font-yourself-some-info/#post-1364066. – ( that topic is in many ways old and obsolete – because a lot of those features are now included to enfold – but f.e. the transfonter tool is still good to use)
You can see that only a few serif fonts show significant differences between browser-rendered italic fonts and real italic fonts.

Next: if you look inside the downloaded static folder – you see some expanded, condensed, semicondensed etc. font-styles-
This is what you mean by squished. Only upload those fonts you like to use.

Next: the nunito font is separated on google to a 7pt and a 10pt style ( i believe it is a kind of kerning they use. optical or metric kerning)
i think the 7pt will be the most used.

Conclusion: Long story short – I have put together the 7pt version as ttf and woff2 ( for modern browsers this is best) font in an uploadable zip.
Delete your uploaded file from the font manager and upload this zip here instead: https://webers-testseite.de/NunitoSans.zip

by the way – activating it for enfold : the fontmanager fonts will be at the end of the dropdown list.

if i looks ok on logged in version – then it is a caching problem.
i see you are using WP Rocket – clear all cachings there and merge the enfold files again ( if you have choosen that option) – clear all browser cachings.

But please let’s clarify the terms first, i think there’s already a problem here.
justification means left and right letters in a paragraph are in one line. ( as you can see on the right side of your screenshot : not logged in )
on the left side this is ( called in Germany Flattersatz ) : ragged margin
What do you prefer to have?

Next : do you like to have this narrow blog – or do you like to have it in one line with logo and navigation?

By the way:
hyphens:auto does not hyphenate Capitalized words: https://github.com/mozilla/wg-decisions/issues/54

One big exception is german language! – Because we write a lot of nouns with big letters at the beginning.

first: on jQuery 3.x. the
jQuery(window).load(function(){
is deprecated – use instead:
$(window).on('load', function(){

now: a link to that page it concerns would be the best way to give you advice

just a little cosmetic correction – always leave a space after punctuation ( even in english :lol )
so replace that one line to – and with pipe:
$cat = implode(' | ', array_map('ucfirst', $categories));

das war ja auch gedacht um den Title vom Breadcrumb in etwas anderes zu transformieren als ein h1.
Dann würde das ja die Doppelt h1 Problematik lösen.
Wie gesagt – besser wäre es das Plugin , welches für den Shortcode zuständig ist zu betrachten.
der wird wohl das h1 setzen.
Denn das: <h1 class=”the_input_element” data-math-equation=”” data-original-math-equation=”” data-decimal-places=”0″>Angebot für eine PV-Anlage</h1>
ist nicht von Enfold seite aus gesetzt worden.

Kann ich deine Seite mal sehen?

ich vermute mal, das ihr das händisch erledigt habt. ( via ftp und dann Datenbank bearbeitet )

Ich nutze Duplicator Pro ( die kostenlose Freie Version ist aber entsprechend gut – es fehlen nur die Scheduling Möglichkeiten )
hier wird alles zu der neuen Domain korrekt migriert.

Duplicator macht zwei Dateien bei der Sicherung. Eine installer.php und einen Archiv File ( zip – oder dup – je nach einstellungen)
Sinnvoll setzt Duplicator sogar Plugins wie (WPS Hide Login ) auf deactiviert – und gemahnt danach es wieder zu aktivieren.

_________________-

I assume that you have done this manually. ( via ftp and then edited the database )

I use Duplicator Pro ( but the free version is good enough ; only the scheduling options are missing )
everything is migrated correctly to the new domain.

Duplicator creates two files during the backup. An installer.php and an archive file ( zip – or dup – depending on the settings )
Duplicator even sensibly sets plugins such as (WPS Hide Login) to deactivated – and then reminds you to reactivate them.

… sorry – soon there will be something more informing …

edit. a quick way is to replace that enfold h1 tag with jQuery in your child-theme functions.php:
or – maybe better try to change the heading in your shortcode of the plugin.

function breadcrumb_change_tag(){
?>
<script type = "text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
	(function($) {
	  $("#top #main .title_container .main-title").contents().unwrap().wrapAll('<div />');
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'breadcrumb_change_tag');

but i guess we can influence the heading via filter : avf_title_args – …
if there is a possiblility to influence the building of an element – it is alway better than to change it afterwards – so use the next solution instead.

yes thats it – ( and btw. the way you described that “problem” was a bit misleading.

If I understand you correctly, then you have, for example, a page that is 1000px high – and you want to shrink the header over this entire scroll distance, e.g. from 100px to your 54px.
But that would mean that the header should only shrink by fractions of a pixel per pixel of scroll distance? I don’t think this is possible.
However, if you only want to have a delayed shrinkage, i.e. I first scroll 100px without anything happening to the header, and only then should the shrinkage start, that could be possible.

The thing is, you didn’t mention that you were using the hamburger from the start.
I can see the item but it is set to display none by css code.

to see a first result bring this to quick css and look:
( a little bit more css to see selectors if influnce )

#top .menu-item-cart.menu-item-avia-special  {
  display: block !important;
}
#top .menu-item-cart.menu-item-avia-special a {
  font-size: 24px !important;
}
.av-burger-overlay-active #top .menu-item-cart.menu-item-avia-special a {
	color: #FFFFFF !important;
}
#top .menu-item-cart.menu-item-avia-special a:hover {
	color: #9d1a18 !important;
}

(click to enlarge:)

_____________________

and don’t forget to replace the “#” by the link of that cart icon

get rid of the class: menu-item in that snippet:

function add_cart_icon_to_main_menu( $items, $args ){
  if ($args->theme_location == 'avia'){
    $cartLink = '<li class="menu-item-cart menu-item-avia-special" role="menuitem"><a aria-label="Cart" href="#" rel="nofollow" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" alt="Cart" ><span class="avia_hidden_link_text avia-menu-text">Cart</span></a></li>';
    $items =  $items . $cartLink;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'add_cart_icon_to_main_menu', 9999, 2 );