https://webers-testseite.de/weber/

click the images to enlarge
first of all if you do not need the shrinking option it is not so complicated as it seems
Insert as usual a logo to the enfold options.

you have to go to dashboard – appearance – menus

insert a home link. On top right of the dashboard window – there is a slide out option called “Screen Options” Press it.
Here you have some settings. Please mark the css classes.

If you click on those littel arrows besides the menupoints you can insert different things now:

On Navigation label you can insert the image link now something like:
<img src="https://url.com/logo-top.png" alt="Logo" />
On css classes : logoimg
You only are in the midpoint if you have odd number of menupoints.
We now have to get rid of the logo container
Quick css:

.logo, .logo a { display: none }
.logoimg img { width: auto ; max-height: 172px }
.container.av-logo-container { position: absolute }
.logoimg .avia-menu-fx { display: none }
#av-burger-menu-ul li:nth-child(4) { display: none }

the last rule is to have not the menu-point on burger menu
you have to count what menu-point is your logo (here it is on 4th position of the menu)

and to have the normal logo on responsive case:

@media only screen and (max-width: 768px){
.container.av-logo-container { position: relative }
.logo, .logo a { display: block }
}

___________________
with shrink option :

we have to use the function avia_header_size() of avia.js
the code to see is on pastebin: look
download it as js file: download

you see on line 61 (original it is 1551 on avia.js) of my code that i get rid of the not mobile option.
i set on line 47 : navlogo = $('.logoimg img'), and
on line 92 i added this code: navlogo.css({'maxHeight': 1.72*newH + 'px'});

these values you can play with. I have on my testinstallation a 100px custom height of the header
my logo is 172px hight – so my factor here is 1.72

upload that menu_logo.js file to your child-theme js-folder (create a subfolder in childtheme called : js
loading the script above in enfold open your functions.php via dashboard – appearance – editor and insert:

function include_menulogo() {
   wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/menu_logo.js', array('jquery', 'avia-default'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'include_menulogo', 100 );

now the “logo” of your menu shrinks on scrolling.

• This reply was modified 7 years, 9 months ago by Guenni007.

let it open i – will post it here. But today i have to go to a 50th birthday – Tomorrow on Germany is a holiday – so i got a bit more time.

Something on pre info:
This is not the logo inbetween the menus – it is a manually link placed with an image on the place where i want to have it.
i set the logo to display none on media querrie for larger screens 768 or 990.
I do use the shrink option of the logo to calculate the img height of that link.

give those menus an overflow : auto and a concrete height (f.e. 60vh means 60% of screenheight) or as code shown a calculated height
I have this sometimes to do on mega-menus that have a second, third row i gave in this case to the mega-menu:

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

i can not see your site – i’m participant too – so i can not give you the code which works for you

supposed it is working:

.avia-menu .sub-menu {
    overflow: auto !important;
    max-height: calc(100vh - 80px);
}

or test this:

#top #header  ul:first-child >li > ul  {
    overflow: auto !important;
    max-height: calc(100vh - 80px);
}

the 80 px depends on your header height

you can insert instead of a lightbox a manually link : create your 3 images besides in a photo program and upload that (or make a screenshot of the gallery and upload that to your server) give each of the three images that manually link!

Enfold recognises the image and if modal is activated (it is on default) it opens those links as lightbox aswell.

https://webers-testseite.de/3images-one-link/

yes first option behind video link (v=…) has to be a ? all the others have to be added by &

you can add new image sizes on enfold by this code in functions.php of your child-theme:

add_image_size( 'new-size', 261, 174, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'new-size' => __( 'New Size' ),
    ) );
}

this part here: __( 'New Size' ), you can name as you like

all new uploaded images will then have that new size to choose – if you only want these three images on the starting page to handle then a new upload is easier than a regenerate thumbnail plugin.

don’t know why the loop function works sometimes and sometimes not ?

btw: if you like to force HD video
&vq=hd720
&vq=hd1080

https://www.youtube.com/watch?v=igoj_-02i1c?rel=0&autoplay=1&loop=1&vq=hd720&showinfo=0&iframe=true

look here for link : https://www.classynemesis.com/projects/ytembed/

look to the waterfall results if this is realy the case – allthough yslow critisise those images – because browser resize is something these speed tools do not like – maybe these are not so weighty reasons.

On your slider there are two images
the one is much more bigger thant the other slider images : slide_thefineartofprinting
and one is a png (2_background) – which could be done as a jpg because of less transparency options
both image have than together 118kb. instead of 400px on your upload !
Here you can save more image size than on 14kb images !
Pagespeed says that you can save space of 60kb on the three images you mentioned

And by the way if you setup the f.e. featured image size : 1500 x 430 option and your images does not have that dimension – enfold upscales the images and crop them afterwards.
Better is to upload bigger images than 1500px x 430px

by the way the second: your response header time is very high – nearly 2s

• This reply was modified 7 years, 9 months ago by Guenni007.

i found an older enfold 4.0.5 this is the hr.php – you can see the code on pastebin
i commented it on the top that this is the version for enfold older 4.1.
it will work on newer versions too – but without screen options dialog
Download: pastebin

rename it to hr.php

you than can optimise the offset via the whitespace amount
or the plugin i recommended got an offset option too !

by the way isn’t there a warning on that button after clicked? Sometimes reading those popups produced from the own site is a good advice.
may be this could be a good first rule for you in quick css:

.avia_reset {
    pointer-events: none;
}

link to kriesi Dec.2010 :yoo

https://webers-testseite.de/weber/

something like this ? (you can do it without the gimmick of animated position)
then it stays in the middle and only shrinks.

• This reply was modified 7 years, 9 months ago by Guenni007.

so if you don’t want to make your gtmetrix public – you have to wait til mods are here.

by the way php7 is a resource monster :lol. sometimes – if you can test to switch to 5.6 try.

these optimizations only help if your images are not responsive.
f.e. the featured-image – allthough you put in the non scaled image – takes the ( on media tab defined) 80x80px.
this is a scaled image – but much smaller than the original ones.

But this is not the point gtmetrix critisise.
If on smaller screens the content rearanges the images shown on your screen are scaled to that amount you gave to them.
f.e. in a 1/4 container the image could be on maximum at a 1000px wide screen 250px on your mobile this is scaled down..
etc. pp

Only on those f.e. floating text elements where an image is placed with a defined height and width to float in that text it makes sense to recalculate it to that dimensions ( or to take a nearby image-size of enfolds predefined sizes)

I don’t want to give offence to you – but the most reason for image speed is that the uploaded source images are wrong optimized.

Click on the images to enlarge: and by clicking again on the lightbox image it changes to next slide

The first one has 389 KB and the second one 156KB
both have the same dimensions !

And these are realy hard test-images.
On other images with real fotos – it might be more extreme to this test.

On Photoshop f.e. there is an extra export modul for web images. There you can set up a higher compression level and progressiv scan option etc. pp.

ok forgotton the .responsive class to set for the first container with the backgroundimages.

Empty your browser cache and have a look

don’t be to cheap to your customer – it is a lot of work to do – so go an get more for you

by the way: i have added a timer function that the scroll event don’t fires steadily.
but i will have a look if it is not best to implement the throttle function to enfold

first of all – i looked to it via ipad and iphone via guess safari mobile version – and i can see background. So please goto Settings / Safari / and erase the cache.

costs : What is worth it to you – if you think it is for less than it is ok for me too.
but if you want to reward the work – you fix the price.

i believe that the version comes nearest to apple did: https://webers-testseite.de/apple-blur/

by the way the flickering comes not from my code.
Go and have a color-section alb element with background image set to parallax.
You will have that flicker too. Those mobile browserversions – with touch screens always are not able to handle it good!