can you try this:

#top #header .avia_mega_div {
  max-height: calc(100vh - 20px);
  overflow-y: auto !important;
}

That exactly is the meaning of background-images. The content height determins the height of the section.

by the way – it now makes me wonder that the original inline rule set by Enfold is with height and not min-height:

.av-minimum-height-90:not(.av-slideshow-section) .container {
  height: 90vh;
}

so my code above reflects that.
Try first now to set only a min-height to 50vh

But as mentioned : the content height will be the determinating factor on that.

give a custom class to your color-section – f.e. : fifty

then put your rules inside a media-query: ( if you like to have it on a different screen-width than 767px – change that f.e. to 989px )

@media only screen and (max-width:767px) {
  .responsive #top .avia-section.fifty {
    height: 50vh;
  }
}

PS: if you really like to have that only for mobile devices – and not for small screen sizes ? you can change that selector ( and use the enfold default class for mobile devices: avia_mobile ):

.responsive.avia_mobile #top .avia-section.fifty {
  height: 50vh;
}

but if I then open one of the two portfolio entries I can scroll to the other entry

you belong to the post navigation arrows left and right. If those entries should stay only in the same category …
can you try this in your child-theme functions.php:

add_filter('avf_post_nav_settings','enfold_customization_postnav', 10, 1);
function enfold_customization_postnav($settings){
  $settings['skip_output'] = false;
  $settings['same_category'] = true;
  return $settings;
}
add_filter('avf_post_nav_settings','enfold_customization_postnav', 10, 1);

if it does not work . we can try a different way …

Well – there is a free version too – but i can not say if this is the plugin you use.
For a customer – long time ago – i edited the postslider.php to insert the counter into meta info of a post.
But I would have to think my way back into it first; the version of postslider.php I still have saved here is from 2020
maybe loop-index.php should also be edited.

i think only a code like this :

number_format_i18n(pvc_get_post_views( $the_id ))

had to be inserted to the $meta.

F.e. open loop-index.php and find around line 431:
$meta_seperator = apply_filters( 'avf_post_metadata_seperator', '<span class="text-sep">/</span>', 'loop-index' );

place just under that line:

$meta_postviews  = "<span class='post-views' title='Calls for: ".get_the_title( $the_id )."'><span class='post-views-icon dashicons dashicons-businessperson'></span>".number_format_i18n(pvc_get_post_views( $the_id ))."</span>";
$meta_info['postviews'] = $meta_postviews;

upload that edited loop-index.php to a child-theme folder : includes

see how it looks like ( after a short css )
https://weber.tips/clock/

on fontello – uploading those svg files – there are no error warnings? Did you see those uploaded icons in the preview on fontello?

one hook that might help is : tiny_mce_before_init

what do you like to have added?

oh wow – did not see that you are only asking for the logo hide/show !
so forget about my solution – which is meant for hide/show complete header – sorry

and if you like to have the benefit of those classes added on scroll – without having a shrink see:

https://kriesi.at/support/topic/how-to-set-a-very-small-shrink-factor/#post-1416772

oh wow – did not see that you are only asking for the logo hide/show !
so forget about my solution – which is meant for hide/show complete header – sorry

_________ so this is not for your problem ____________

yes, this is a possibility – but has the disadvantage that this class (header-scrolled) is only removed if you are in the top position on the page. This means that the header only appears again then. If you scroll-direction is up at the bottom (or middle) of a page, nothing happens.
It would therefore be better to have a class that is removed as soon as a certain distance is scrolled back – and thus restores the header visibility.

This is a function adding a class (hide-header) depending on scroll distance.

function hide_header(){
?>
<script>
(function($){

  'use strict';
  var c, 
  currentScrollTop = 0,
  header = $('#header');

   $(window).on('scroll', function () {
      var a = $(window).scrollTop();
      var b = header.height();
      currentScrollTop = a;

      if (c < currentScrollTop && a > b  ) {
        header.addClass("hide-header");
      } else if (c > currentScrollTop && !(a <= b)) {
        header.removeClass("hide-header");
      }
      c = currentScrollTop;
  });
})(jQuery);   
</script>
<?php
}
add_action('wp_footer', 'hide_header');

The css you need on that must reflect your header height you set on Enfold options. And the options – f.e. if you have a top-menu or phone-info field above the header. And if it scrolls away.

The trick now is to shift the header in y-direction above the viewport.
And because we do not want to do that if the burger menu is opend – we exclaim it bei not selector ( :not(.av-burger-overlay-active) )
The media query settings are individual – and you have to adjust it to your needs – if you got pages with transparency headers – maybe there had to be different padding-top settings of #main.

css – first settings:

.responsive:not(.av-burger-overlay-active) #header {
  top: 0px;
  -webkit-transition: transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

.responsive:not(.av-burger-overlay-active) #header.hide-header {
  -webkit-transition: transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

.responsive:not(.av-burger-overlay-active) #main {
  top: 0px;
  -webkit-transition: padding-top 0.5s ease-in;
  transition: padding-top 0.5s ease-in;
}

.responsive.av-burger-overlay-active #header {
  position: fixed !important;
}

@media only screen and (min-width: 990px) {
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-116px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive:not(.av-burger-overlay-active) #header {
    position: fixed !important;
    top: 0;
  }
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-90px);
  }
  .responsive #top #main {
     padding-top: 90px !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive:not(.av-burger-overlay-active) #header {
    position: fixed !important;
    top: 0;
  }
  .responsive:not(.av-burger-overlay-active) #header.hide-header {
     transform: translateY(-80px);
  }
  .responsive #top #main {
     padding-top: 80px !important;
  }
}

After activating the Debug Mode the shortcodes shown under the layout insertion field.:

copy all shortcodes from there and input these to the same field in a new created page on the other installation.
And save now.
After that you had to fix the content – as the links, e.g. from images, still point to the first domain.

As Participant as you are – no private content for me.

Mit welchem Programm beurteilst du das .
ich habe mal hier Google font page und Illustrator Vergleich:

ich sehe keinen großen Unterschied.

PS: welcher Browser ?
Da kann es im Rendering auch schon mal Unterschiede geben.

Ein wenig off-topic:

wenn man so einen variablen Font mal installiert hat ( ich habe sicherheitshalber dann beide statische und variable eingebunden) dann wählt man bei Enfold unter Fonts zunächst den statischen als Standard aus, und kann dann per @supports regel diese ersetzen , wenn der User Browser das unterstützt.

z.B.

@supports (font-variation-settings: normal) {
  body.roboto {
    font-family:'roboto-flex';
  } 
  
  #top.roboto h1,
  #top.roboto h2,
  #top.roboto h3,
  #top.roboto h4,
  #top.roboto h5,
  #top.roboto h6 {
    font-family:'roboto-flex';
    font-weight:500;
 }

 #top.roboto .title_container .main-title,
  #top.roboto tr.pricing-row td,
  #top.roboto  .portfolio-title,
  #top.roboto .callout .content-area,
  #top.roboto .avia-big-box .avia-innerbox,
  #top.roboto .av-special-font,
  #top.roboto .av-current-sort-title,
  .html_elegant-blog #top.roboto  .minor-meta,
  #top.roboto #av-burger-menu-ul li {
    font-family:'roboto-flex';
    font-weight:400;
 }
}

um dann die Einstellungen für ein spezielles Element herauszufinden, kann man dieses sich in den Developer Tools der Browser anschauen.
Sehr schön kann dies der firefox – dort gibt es oben rechts den Tab : Schriftarten
Hier zieht man dann die Regler des variablen Fonts solange bis man das gewünschte Ergebnis hat.
( wie immer – click to enlarge the images )

Ist man zufrieden, wechselt man zum Reiter : “Regeln” und kann dann am Element ablesen was man ins Quick css übernehmen muss:

yes – that might help
ps: if you like to have an animated svg waves – download: Waves
because your divider is not standard enfold divider – i guess you know how to install custom svg dividers.

see: https://weber.tips/

• This reply was modified 11 months, 2 weeks ago by Guenni007.

Prinzipiell geht es variable Schriftschnitte zu laden! Dabei solltest du um den Font-Manager von Enfold zu nutzen, jedoch beide getrennt hochladen.
Wenn du dir allerdings den Browser Support ansiehst: https://caniuse.com/variable-fonts nur die IE’s und Opera mini nicht mitmachen.

Ich würde mich also eventuell nur für den Upload des variablen fonts entscheiden. Im Zweifel werden dann bei älteren Browsern die Fall-Back Fonts geladen ( helvetica etc. ).

Wenn Du mir sagst, um welche schrift es geht , dann könnte ich genauere Anweisungen geben.

PS: aus Performance Gründen überlege dir – ob du wirklich alle Schriftschnitte benötigst. Wenn du also von vornherein weißt, das du für Headings nur die 700er benötigst, und bei dem body text nur 300, 400, 700 – dann würde ich nicht alle hochladen und eventuell dann doch die statischen Fonts hochladen.
Zusammengenommen könnten die dann vom zu ladenden Dateivolumen geringer sein, als der variable font.