maybe you go and scale the iframe in the code above to:
these are your settings of width from enfold container.

{max-width: 1310px;height:90vh}

and adjust the hover state of iframe close button

.mfp-arrow:hover, .mfp-close:hover {
  background-color: #7ec346;
}
.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close {
  right: 0;
}

PS : you do not need to have the custom markup – you can use Enfold Predefined Markup. Just get rid of that part:

function popup_from_avia2_menu() { 
?>
<script type="text/javascript">
(function($){
  $(document).ready(function() {
    $('.menu2iframe').magnificPopup({
    	delegate: 'a',
        type: 'iframe',
    });
  });
})(jQuery);
</script>
<?php 
}
add_action('wp_footer', 'popup_from_avia2_menu');

Enfold uses the lightbox of Magnific Popup from : Dmitry Semenov

on its api you can see how to get some animation on it: https://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

in general the animations are set there via custom-class.
Here you have some examples on animation: https://codepen.io/dimsemenov/pen/GAIkt

the only thing is that you had to transform the given css rules of a animation to your quick.css
f.e. i like the mfp-3d-unfold:

/* 
====== 3d unfold ======
*/

.mfp-3d-unfold {
  /* start state */
  /* animate in */
  /* animate out */
}

.mfp-3d-unfold .mfp-content {
  perspective: 2000px;
}
.mfp-3d-unfold .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-60deg);
}
.mfp-3d-unfold.mfp-bg {
  opacity: 0;
  transition: all 0.5s;
}
.mfp-3d-unfold.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: rotateY(0deg);
}
.mfp-3d-unfold.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-3d-unfold.mfp-removing .mfp-with-anim {
  transform: rotateY(60deg);
  opacity: 0;
}
.mfp-3d-unfold.mfp-removing.mfp-bg {
  opacity: 0;
}

And is set via child-theme functions.php by:

function add_lightbox_effect() { 
?>
<script type="text/javascript">
(function($) {
$(window).load(function(){
  $('.inline-popups').magnificPopup({
    delegate: 'a',
    removalDelay: 500,
    mainClass: 'mfp-3d-unfold',
    type:'inline',
    midClick: true,
  }); 
  $(document).on('click', '.popup-modal-dismiss', function (e) {  
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'add_lightbox_effect');

the popup-modal-dismiss thing is not needed for that – but if there is a button to go to f.e. an anchor link on the page – it closes the popup with that class.

you see that for that code a custom-class is set to a parent of the anchor link : inline-popups
but change it to whatever you like.

See here an example : https://webers-testseite.de/pureinstall/info/

i am afraid that your plan to replace the logo with a pixel gif and display a background image instead ( with fake input fields ) will not be successful.
There is something conceptually wrong!

Hm or is it a different page you like to edit?
https://tbwp.hostworks.com/

You have to come clean with yourself somehow, where you would like to have what information.
So what about your search fields? Is there any chance the top header is a position you could live with.

In principle, you could also place a widget in the place where these fields are planned now.
And have the burger for the main navigation on the left.
You should clarify this for you beforehand.

This will solve the double Hamburger for your setting – but the hamburger on the right top is then over the “fake-search-fields”

.av-burger-menu-main.menu-item-avia-special {
  background: #3a5f93;
}
@media only screen and (max-width: 1200px) {
  .container.av-logo-container .avia-menu {
    display: none !important;
  }
}
@media only screen and (max-width: 989px) {
  #top #header #header_main_alternate {
    display: block !important;
  }
}
@media only screen and (max-width: 767px) {
  #top #header #header_main_alternate {
    display: none !important;
  }
  .container.av-logo-container .avia-menu {
    display: block !important;
  }
}

First of all – you gave the box-shadow to the text-block section? Why don’t you use the option on column – there is allready an option for that.

here is my setting: https://webers-testseite.de/pureinstall/nsgcouk/
put only these 1/3 columns in one color-section
give a custom class or ID to the color-section ( i did with ID: flex-section )
do not choose the equal height option ! ( we make that via flex modell )
on the right column the text-block : i put the text in a span with custom-class

then the css for quick css is:

#flex-section .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
}
#flex-section .entry-content-wrapper::before, 
#flex-section .entry-content-wrapper::after {
  display: none;
}
#flex-section .entry-content-wrapper .flex_column {
  flex: 1 1 auto;
  min-width: 280px;
  margin-bottom: 50px;
}
#flex-section .avia_textblock span {
    display: flex;
}
@media only screen and (max-width: 1054px ) {
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(1) {order: 1;}
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(2) {order: 3;}
  #flex-section .entry-content-wrapper .flex_column:nth-of-type(3) {order: 2;}
}

the flex: 1 1 auto; only makes sence if you reorder like in my example the columns.
if you do not like to have the second under the two other columns in responsive case change it to: flex: 0 1 auto;

• This reply was modified 5 years, 10 months ago by Guenni007.

this is only display block/none
i inserted on the text-block an additional entry:

@media only screen and (min-width: 768px) {
  .replaced-slogan {
      display: none;
  }
}

@media only screen and (max-width: 767px) {
  .fixed-heading {
    display: none;
  }
  
  .replaced-slogan {
  padding: 20px 20px 10px;
  background-color: #96c451;
  margin-bottom: 20px
  }
}

The ul.social_bookmarks is there – and the list items are there – but there are no :before ( which contains the icons for the medias )
there is a css rule definition that makes no sense

#top #wrap_all .social_bookmarks, 
#top #wrap_all .social_bookmarks a, 
#top #wrap_all .social_bookmarks li {
    background: 0 0;
}

so guess there is something confused in your setting – what if you switch off the autoptimise plugin ( refresh all cachings – and maybe enfold merging )

First : did you try that: https://kriesi.at/support/topic/position-fixed-div-to-become-position-unfixed-rest-at-point-on-page-scroll/#post-1204832

what i just mentioned above is that with a custom class it would be easier to address this element.
Now in the code there is as selector: #av_section_1 .avia_textblock div[style*="fixed"]

with your setup and the code above and f.e:
in addition :

@media only screen and (max-width: 767px) {
  .page-id-1048 #av_section_1 .flex_column:nth-of-type(2) {
      margin-top: 60px !important;
  }
}

the responsivie case could be ok too!
The more often I look at it, the more I can live with the fact that this fixed element slides under the texts.

• This reply was modified 5 years, 10 months ago by Guenni007.

just for info – you can combine the waypoints script with the animate css: https://daneden.github.io/animate.css/
you can download the css form daneden – put it in your child-theme folder css ( if not existent – create one ) – load the css via child-theme functions.php:

// Einbinden von Animate.css
add_action( 'wp_enqueue_scripts', 'wp_load_animate', 20 );
function wp_load_animate() {
   wp_enqueue_style( 'animate', get_stylesheet_directory_uri().'/css/animate.css' );
}

see my test page from above with hinge class added
__________________________________

( if you don’t like to load the whole css – you can pick out the keyframes you like to have f.e: the hinge )

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

• This reply was modified 5 years, 10 months ago by Guenni007.

Next question : on all these pages – will the recurring content be placed at the end using “page as footer” ?

Once again edit: it would be nice to have a custom-class to that fixed div:
f.e.:

<div class="fixed-heading" style="position: fixed; z-index: -5;">
<h2 style="padding: 20px; background: #96c451; color: #fff;">We specialise in…</h2>
</div>

This is better to select for any css or script.
Because Enfold has allready implemented the waypoints script – it is easy to use this. You can have that last but one color-section ( #emergency ) as a trigger. When it comes to viewport you can let things happen. ( Add classes f.e. to that fixed div )

Also die Option von Enfold : logo links menu darunter bietet doch schon einmal genau das was du wolltest oder?
Oder wolltest du das Logo mittig oben?

@media only screen and (min-width: 768px) {
	div .logo {
	    left: 50%;
	    transform: translate(-50%);
	}
}

Das was nicht in Enfold vorgesehen ist, dass die Social Media Icons mit in diesem Menu ( header_main_alternate menu ) sind.
Die Einstellung bei Header – Extra Elements : “Display in Main Header Area” hast du gesehen? – Die sind dann aber rechts vom Logo !

Was möglich ist, ist die socket social media icons ( Enfold – Footer – Social icons ) zu nutzen, um diese als Kopie oben in das Hauptmenu einzufügen.

siehe: https://webers-testseite.de/pureinstall/
Wenn es das ist was du willst, dann kommt die Erklärung hiernach.

That’s something I notice from time to time, but unfortunately it doesn’t get any attention: the demo import links are all still based on the old non https links. Furthermore many of them are also based on www basis: http://kriesi.at
Although they are actually redirected to the https page in the browser:
http://kriesi.at/themes/enfold-visual-artist/files/2015/07/sketch1a.jpg
These are still not included in the import.
So someone should check the xml demo files and update the links.

now i’m working on that – so it might be not working for a while . It seems to be better if i change the dots to be before the avia-menu-text when they are at the left side.

Edit: so – if you only want some dots without text ( only on hovering) you can change yourself to your needed css.
The most important thing here is to have the active state of the menu list points.

• This reply was modified 5 years, 10 months ago by Guenni007.

https://webers-testseite.de/pureinstall/dot-navigation-with-colored-sections/

you can manage that with Enfold Tools.

• create a page where you have color-sections – set to 100% height.
• each of the color-sections got a unique ID.
• on top place a fullwidth submenu ( you can even use here an existing one ! But do not fix it here )
• the targets are the unique ID’s of the color-sections.

the rest is a bit of jQuery ( if you like to have an active state on those items)
and quick css.

All Instructions are on that page – with all code to be placed.
I placed the class of the active state to the li element and named it : inview
PS: you do not need to have this on the left side. Thats just a bit css more. I think it will not disturb the scroll bars here on the left

• This reply was modified 5 years, 10 months ago by Guenni007.

you had to find a solution for small screens on that – maybe you put the whole code only for a min width:

@media only screen and (min-width: 768px) {
  …
}