-
Posts
-
Good day. I found many posts about this topic, but could not get them to work. I want the header to shrink when I scroll, but just not as much as you have it. I read that the shrinking value is set in a JS file and set to 50% of the original height of the header. I would like it to shrink less, just 75% or maybe 65%. I was hoping you could do it in CSS, but it seems like it’s only via a JS file?
Also, I would like to be able to update this JS file in the child theme.
So I found these two posts and added the action to my child themes file and modified the JS file to be “el_height/1.5” rather than “el_height/2”, but it did not work:
Can you help? Login credentials to my test site are in the private section below.
Also, when I try to edit the JS file through WordPress (Appearance > Editor > Enfold Child > js > avia.js), I get an error saying: “There are 8 errors which must be fixed before you can update this file.” So I needed to edit the JS file in note pad and then upload via FTP. I never touched that avia.js file so those errors came with the original file. Not sure if that’s something you also want to look into not just for me but for others as well?
Thank you!
but the one : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/ you did not find :wink
the shrink function is a part of avia.js – so if you like to have the same behavior there will be no other way to influence the js – because the function is bound to scroll event.
Thank you very much @guenni007 for responding to my topic. @Rikard, I did not try his solution as it appears making those changes to the two values in the avia.js file (changing to el_height/1.5 on both lines) and moving it to my child theme seems to have worked. NOw when I scroll, the logo and header quickly go to very tiny and then immediately goes to 75%. Can you look again at the URL in the private content to see if you experience this as well?
Also, I didn’t want to have to create a brand new JS file like the other posted mentioned. I wanted to keep it easy and just modify a file that Enfold created. So I would like to keep it as is if you agree that what I did originally worked, and if there’s a way to fix that quick shrink from regular header size to very tiny and back to 75%. Please check it out when you have a moment and let me know your thoughts.
Thank you, as always.
no not the same value – it only is the same divisor if scroll-distance to reach the endpoint of header-height and amount are the same
this is only on 1/2 the case : divisor 2.
f.e. starting an 200px you come on default to 100px by scrolling 100px !if you like to start at 200px and want to reach 150px end height you have to scroll 50px
so first divisor is 4 ( 200px / (200px – 150px) )
second divisor is 1.33 (because of 200px/150px )thats the reason why i explained it in the thread on detail :
first divisor: h start / (h start – h end)
second divisor h start / h end
but on updating you will loose these settings if you change it on parent-theme avia.jsHi,
In addition, the header shrinking option will be disabled if the header height is less than 65px. You can find it in the functions-enfold.php > avia_header_setting function > line 830.
//if the custom height is less than 70 shrinking doesnt really work if($header['header_size'] == 'custom' && (int) $header['header_custom_size'] < 65) $header['header_shrinking'] = 'disabled';Best regards,
Ismaelis the 65 px the starting header height? because i have made some shrinks from 150 to 1px – and this works too!
- You must be logged in to reply to this topic.