Hej Folks, is there a way the shrinking header won’t cut off the logo? Current settings:
/*Ändert das Logo bei geschrumpftem Header*/
.header-scrolled .logo a img {
visibility: hidden;
}
.header-scrolled .logo a {
background: url(https://www.vifsg.de/wp-content/uploads/2017/08/vifsg_header-logo-e1502043394906.png) no-repeat top left;
}
/* js/avia.js >> 1565 >> newH = el_height/1.5[2]; */
why don’t you set up your background to size : contain:
.header-scrolled .logo a {
background: url(//www.vifsg.de/wp-content/uploads/2017/08/vifsg_header-logo-e1502043394906.png) no-repeat top left;
background-size: contain;
}
I also wanted to change the height of the menu. That helped:
js/avia.js >> newH = el_height/2;
to this:
js/avia.js >> newH = el_height/1.5;
! but read this : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/
there are two values to change ( and only on half size the divisor is 2 on both values !)
Thanks @guenni007
aha – but there is still a jump in logo change.
your values should be on avia.js:
if(st < el_height/3)
and a bit down under that value
newH = el_height/1.5;
81/54 = 1.5
81/(81-54) = 81/27 = 3
you can see here a very elegant way with svg instead of png – in this case we can work only with one file ( no substitution ) and on header scrolled option some path of the svg goes to opacity zero:
https://webers-testseite.de/cynthia/