mal abseits dieses Wahnes den page-speed tools genüge tun zu müssen – ist doch mit der Gtmetrix Messung soweit alles in Ordnung!
Eventuell sollte ich auch mal Autoptimize testen – schein ja was zusätzlich zu bringen.

Was mich an deiner Seite zunächst eher stören würde, ist die Tatsache das die Seite nicht https lädt. Das Cert ist gültig bis: 8.10.2020, 16:28:32 (Mitteleuropäische Sommerzeit) aber da muss also was im argen liegen.
Bist du jüngst erst auf ein Zertifikat gewechselt? Denn das ist ein wesentlich schwerwiegenderes Problem bezüglich DSGVO als der fehlende Copyright Hinweis.
Rechtlich denke ich genügt es das detailliert im Impressum anzugeben. Es muss nicht immer direkt bei dem Bild stehen – oder hat sich das was geändert?

__________

apart from this delusion of having to do enough with the page-speed tools – everything is fine with the Gtmetrix measurement!
Maybe I should also test Autoptimize – it seems to bring something additional.

What would bother me on your side is the fact that the page does not load https. The cert is valid until: 8.10.2020, 16:28:32 (Central European Summertime) but there must be something wrong.
Have you recently switched to a certificate? Because this is a much more serious problem regarding GDPR than the missing copyright notice.
Legally I think it is enough to mention this in detail in the imprint. It does not always have to be directly next to the picture – or has something changed?

I do not see your site link – cause i’m participant as you – to give better advice it would be nice to know more about your header settings.

Well i guess this is not quiet simple as some like to have it.
To get the sticky header even on mobile and on transparency header this is just
quick css:
( i have on most of my installations the 990 break point for burger menu so: )

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }
  
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

__________________________ Just for Info – if you only interested in the solution skip to the next post ________________

The sticky state when burger is active depends on the menu.js and the condition for :
if( burger_menu.is(":visible")
my search here on the board resulted unfortunately only in hits, which commented out this condition, which if you test this of course does not lead to the goal.
so we had to find a calculation for that case – this can be found out more or less quickly – my solution is:

if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ){
	this.css({top: header.Height() , position: 'fixed !important'}); fixed = true;
}

Info: i first had the header.outerHeight() – but with that i had a 1px difference on scrolling on – do not know why.

So far so good, but if you want to use a hamburger for the submenu in the responsive case, what is calculated in the script is unfortunately overwritten by the menu.css by setting values to !important.
Even the calculated inline style could not overwrite these settings because the selector is more specific f.e:

/**** from original menu.css - each break point (switch ) has these rules set to !important  *********/
@media only screen and (max-width: 989px){
	.responsive #top .av-switch-990.av-submenu-container{top: auto !important; position: relative !important; height:auto; min-height:0; margin-bottom: -1px;}
}

so we had to get rid of the important setting – thats why we need to have an own child-theme menu.css

if these messages are for me – i can not see it – because i’m Participant as you are an do not see private content area.

All opening brackets need a closing one!
so if you get rid of: if(is_page(19)){

you had to find the corresponding closing curly bracket. -( the round one are neutral the open and just closes a few letters behind)

that is the reason why your code is not without error.

Another hint: here on board it might be usefull to insert code as code – therefor we had here the code tag above.
First click on code – then insert your code – click now on /code (oben a tag – close a tag as always)

To look what might be not correct it is best to have it 1/1 – boardsoft changes if you do not use the code tag the content ( f.e. quotation marks to something different etc. pp )

just one moment – brainstorming
there is a little plugin specialized on background- video. This plugin: advanced wordpress backgrounds is capable to play even youtube or vimeo videos from a start to an endpoint as background.
See here with your video from 20sec to 55sec. You only have to set a few smaller css entries to adapt it to Enfold.
The movie will be put into the appropriate section using the code-block element and a shortcode from the plugin.
https://webers-testseite.de/youtube-background/
Password: Enfold

But i try to find a solution with Enfold Tools only.

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

if you like to have a big area as aktive link you can surround inside that div the section which is all arround the content (to surround the whole div i would not try) – because an anchor as a block-level element is hard to style f.e. with border-radius and it is hard to position in that manner so my solution now on that page this way:

<div class="my-styling-for-that-ads" …><a href="https: …><section>your content </section></a></div>
and give the padding to the section or to the textblock as here in the code:

function insert_to_a_fullwidth_slider() { 
?>
<script>
(function($){
	$( '.avia-fullwidth-slider.my-fullwidth-slider-with-that-ads .avia-slideshow-inner' ).append('<div class="my-styling-for-that-ads" style="background-color: #21495d; border-radius:0px 0px 30px 0px"><a href="https://YOUR-DOMAIN.com" target="_blank" rel="noopener noreferrer"><section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock  av_inherit_color " style="padding:0 20px 10px 20px; color:#FFF " itemprop="text"><p><img class="alignnone" src="/wp-content/uploads/rhino-on-blob.png" alt="rhino-logo" width="150"></p><div class="hr hr-short hr-left" style="margin: 10px 0;"><span class="hr-inner"><span class="hr-inner-style"></span></span></div><p>Skip your<br>security deposit<br>with <strong>Rhino</strong></p></div></section></a></div>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_to_a_fullwidth_slider');

just for a better understanding the inserted div – see a solo html page with that div only and the tree-structure:

but we need that div in a one-liner to insert it with append in the functions.php. Otherwise we will have a php error on that.

PS : you then can have too a hover style for the whole div:

.my-styling-for-that-ads:hover {
    background-color: #0040ff !important;
}

in other words – css has agreed to shorten the specifications for many of the properties.
Sizes that can be set to four settings because an up/down – left/right exists is as follows:

2 values instead of 4:

margin: 0 auto; /*** on the following that is interpretation of the given short form ***/
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

so two values if there could be 4 means that we have same values for top/bottom and right/left
3 values :

margin: 0 auto 30px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;

you see the values are set clockwise beginning from top value: top, right, bottom, left

Values that refer to corners starts top-left and then clockwise:

border-radius: 2px 3px 4px 5px;
    border-top-left-radius: 2px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 5px;

on hex-color settings there is only if the value inside a color-channel is the same you can not it f.e.:
#33FF22 short to : #3F2
Thats all so if you have white : #FFFFFF this is the only shortform for it : #FFF
etc. pp:
for your setting above:

.custom-class .container {
  max-width: 1500px;
  padding-left: 0 20px;  /** maybe here is an !important necessary **/
  margin: 0 auto;  /** this is standard value - no need to change it **/
}

you can see here a brilliant list of css settings : https://tympanus.net/codrops/css_reference/

see now: https://webers-testseite.de/cynthia/

By the way working on that – i recognized that it might be more easy to use the normal header style: logo: left – menu right !

I would strongly recommend to install a child theme for Enfold.
You could of course place it in the functions.php of the parent theme, but these entries would be lost with the next update.
So you have exactly one place for such snippets – the child-theme functions.php.

See here some info and donwload a predefined child-theme: https://kriesi.at/documentation/enfold/child-theme/

I do that from the beginning of all my installations – but Enfold offers some tools to take over the parent-theme settings.
On Enfold – Import/Export there are some buttons that could help you.

My experience and the reading here on board show that the following procedure is probably the most successful:

• Parent Theme active : export theme settings file
• Child Theme activate then : import that file.

for responsive case maybe you decide to shrink a bit or to remove parts of the content:

@media only screen and (max-width: 767px) {
  .page-id-37941 .add-in-slider {
    transform-origin: left top;
    transform: scale(0.6);
    transition: all 0.7s ease
  }
}

@media only screen and (max-width: 480px) {
  .page-id-37941 .add-in-slider img,
  .page-id-37941 .add-in-slider .hr-short{
    display: none
  }
}

As Rikard said – you had to adjust it to your page-id

By the way – on that page i have only in account the scroll event. If it should be perfect there had to be an onresize event too. Because on resize the offsetTop changes. But i didn’t want to make it too complicate on that page.
Because on resize function are very performance intensive. So a debounce function had to be prepared too.
Etc. pp.

if you have : logo center, menu below
and : menu show as burger always
and : show search in menu
then we are nearby:

after that : you can see on my test-page for that: https://webers-testseite.de/cynthia/
a little quick css:

@media only screen and (min-width: 990px) {
  .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu {
      display: inline-flex !important;
      width: 100%;
      flex-flow: row nowrap;
      justify-content: space-between;
  }

  .html_header_top #top .av_header_stretch .container.av-logo-container {
    width: 60%;
    z-index: 101;
  }

  #header_main_alternate {
    margin-top: -60px;
    border: none;
    position: relative;
    min-height: 58px;
  }
  
  .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 116px;
   }
}

@media only screen and (max-width: 989px) { 
  .responsive.html_header_top #top .av_header_stretch .container .inner-container .logo {
    width: 50% !important;
    z-index: 101;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .main_menu {
    width: 100% !important;
  }
  .av-main-nav-wrap {
    width: 100% !important;
  }
  .av-main-nav-wrap > ul {
    display: inline-flex !important;
    width: 100% !important;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .responsive #top #wrap_all #header .container {
    width: 95% !important;
    max-width: 95% !important;
  }
}

If you like to have the burger symbol on the left and the search on the right you only had to change the flex-flow to:
flex-flow: row-reverse nowrap;

if you like to have the burger slide out from the left then – please do a search this is often asked.

that test page is gone to heaven :)
but the solution on https://kriesi.at/support/topic/diagonal-background-image/#post-912999 is a nice starting point.

you can do that for quick css only – it has an own ID so :
If your developers have all admin right – you might want to have it globaly

function admin_head_mod() {
echo '<style type="text/css">
	#avia_quick_css { 
		display: none !important
	}
</style>';
}
add_action('admin_head', 'admin_head_mod');