Viewing 30 posts - 1 through 30 (of 41 total)
  • Author
  • #867542

    the shrinking behavior is set in the avia.js file of enfold (arround line 1500)
    The function is called: function avia_header_size() but initialisation starts a bit earlier.

    A lot of questions turn arround the amount of shrinking and on default avia shrinking amount is 2
    If you start at 100px it will stop shrinking on 50px. This is on the calculated rules a special case – and that is why alot of users think they only have to set a different factor to it. The function takes two distances in account :
    the one is the factor of starting header-height to ending header-height !
    and the other is the factor starting header-height to scroll-distance to reach the ending header-height. !
    On that special case to have the half height at the end both factors are 2 !

    So now – if you like to have a different behavior you must change both values in the code

    ( and to have not a whole new avia.js in your child-theme the shrink_fix.js can be implemented in your child-theme as well
    shrink_fix.js : see on pastebin and download

    to embed this js – upload it to your child-theme/js folder (create one if there isn’t one)
    this goes to your functions.php of your child-theme:

    function include_shrink_fix_js_file() {
       wp_enqueue_script( 'shrinkfix', get_stylesheet_directory_uri().'/js/shrink_fix.js', array('jquery', 'avia-default'), 2, true );
    add_action( 'wp_enqueue_scripts', 'include_shrink_fix_js_file', 100 );

    Everything you have to change on that shrink_fix.js file is now both values on line 62 and 74 see here a short instruction:

    click to enlarge:


    Hey Guenter,

    Thanks a lot for your detailed instructions! :)

    Best regards,


    this was again one of the always recurring FAQ – so now i can link to it for that



    Thanks! Do you by any chance have a custom tag on your tutorial threads? I think that might be a good idea to help find your tutorials :)

    Best regards,


    no ( i will do that from now on ) – and i will in the future open a thread like this instead of always and always answering to the same question.


    Hi again.
    Looks like I did everything and changed the values for shrinking header 100px ->80px, but still behaves in the same way.
    Plus when I switch to child theme, all the settings (colors an fonts) are changed to the originals.

    My site is



    Please go to Enfold child theme options > Import & Export and import parent theme options. You may need to save theme options to flush dynamic stylesheet. If that does not help, please start a new thread under Enfold sub forum and we will look into it :)

    Best regards,


    Hi Yigit.
    I did import parent theme options. That didn’t help.
    Saving theme options didn’t help either.
    Had to do it two more tries before all worked including shrinking header :) :)
    The only thing that it reverted to the original footer (the one you see when you just installed Enfold) instead of the one I started working on in Parent theme. Since I didn’t do much work, that will be easy to fix :)

    Thanks for your support.



    Great! Glad you figured it out :)
    We will keep this thread open. Please feel free to start a new thread if you have any other questions or issues :)



    Well but all has to do with the change to a child-theme. It has nothing to do with shrink-fix code


    Hey Guenni,

    this was just what I was looking for. Great stuff! Unfortunately it just works up to the point when the shrinking is done.
    In that very instance the heade blows up again. This is because of the “container av-logo-container” getting a height and line-height via some script as well.

    Any idea why this could be and how to prevent it?

    Thanks in advance Sascha


    “The man who does not read has no advantage over the man who cannot read.”

    I did not read the full tutorial. Shame on me! There are two different deductions to calculate. Shame on me!
    Great solution that works as expected! ;)

    THANKS guenni!


    Does this also work for Enfold 4.3.1 ?


    Yes – but now it is a bit different:
    the shrink calculation is on enfold 4.3 ff a seperated js file
    so just upload a copy of that file avia-snippet-sticky-header.js to your child-theme js folder

    add this to your functions.php of your child-theme:

    add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
    function wp_change_sticky_header_script() {
       wp_deregister_script( 'avia-sticky-header' );
       wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);

    and edit then this copy as you need it.



    Thanks @Guenni007. :)

    Best regards,


    I was getting odd behavior of the shrinking header post 4.3 update where the shrunk logo would anchor to the bottom of the sticky header.

    The information here helped. I did not have to do the JS fixes but it did make me find that the differences I had between the height of our main logo on the Theme Options page vs logo height on the header>transparency options were different and did not match my header height exactly either. This did not cause an issue pre 4.3 but did since.

    Making the logos exactly the same height/shape with the differences between transparent or not and matched header height fixed it and logo appears larger under scrolled now as well. Just posting in case someone is searching for similar info!


    Hi sump22,

    Thanks for sharing, much appreciated!

    Best regards,


    For enfold 4.5.1 the lines are on 64 and 76

    click to enlarge:

    then upload that edited js file to your child-theme/js folder ( if there is no one – create it)
    then put this to your child-theme functions.php:

    add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
    function wp_change_sticky_header_script() {
       wp_deregister_script( 'avia-sticky-header' );
       wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);


    Thanks for the update :)

    Best regards,


    Why not making this configureable through the enfold theme menu? As I see you would only have to implement a configureable variable for h(end) in the enfold menu and update the avia-snippet-sticky-header.js. New code would then e.g. be:

    if(st < el_height/h-start/(h-start-h-end))
    newH = el_height/(h-start/h-end);

    • This reply was modified 5 years, 5 months ago by The Shadow.


    The existing header options are usually enough for a lot of websites, so adding another option for that is not a priority. Please follow @Guenni007’s suggestion.

    Best regards,



    I find this odd: I copy avia-snippet-sticky-header.js to enfold-child/js/avia-snippet-sticky-header.js and I add the action to the child-theme function.php – not changing any values yet. Still the sticky header size is reduced from 65px to 52px (starting from 130px).

    I then changed the values within enfold-child/js/avia-snippet-sticky-header.js (line 64 to 2.6 and line 76 to 1.625 – aiming for 130 => 80) and it still gives 52px height. Any ideas?



    so you want to start at 130px and want the end-height after shrinking of 50px ?

    on line 64 : 130px / (130px – 50px) = 1.625
    on line 76 : 130px / 50px = 2.6

    so you want to start at 130px and want the end-height after shrinking of 80px ?
    on line 64 : 130px / (130px – 80px) = 2.6
    on line 76 : 130px / 80px = 1.625

    do not forget to refresh cache and regenerate the merged css and js files if you have activated the merging. !


    Thanks, @Guenni007, for the quick response.
    It’s the latter case (starting at 130px and finishing at 80px). I cleared the cache as well. The result is again: starting at 130px and finishing at 52px.

    Greetings from Vienna, Ralph


    can you show me that site?
    Edit: i found it with your Name:

    PS : Starten ( Enfold Optionseinstellung Header: 130px –
    nach dem Shrinken soll er dann 80px hoch sein ( also weniger shrinken als es standardmäßig vorgesehen ist)
    End Höhe also 80px

    but then read carefully first the 2.6
    then 1.625

    and by the way – i see that it work to 50px – in your case where you switched the values. Where did you get the info of 52px?


    Hi @guenni007!

    Thanks for the investigation.
    I looked at <div class=”container av-logo-container” style=”height: 50px; line-height: 50px;”> – there was a 52px where there is now the 50px – strange. When I comment out the part in the functions.php, I get the 65px there. I also put back the values to /2 in the child-theme js file, assuming it should fault back to 65px – however, it remains at 50px. I do clear the cache after every change.

    Could you send me an email, to discuss it offline, until we find the problem? Thanks.



    Now it works – I have no idea why… Maybe it was a question of time between emptying the cache and seeing results.
    Still, please, @guenni007, give me a shout via email



    Hi Ralph,

    Great, I’m glad that you got things working and thanks to @guenni007 for helping out.

    Best regards,


    everything is under my nick or avatar.


    Guenni007 — thanks for this guide you put together. Very helpful!
    Ralph — I noticed I had to save the theme options to see the results of editing the edited JS file. If the “Save all changes” button is greyed out, simply toggle a setting back and forth and it will allow you to save.

Viewing 30 posts - 1 through 30 (of 41 total)
  • The topic ‘Shrinking of header – Amount – An Info’ is closed to new replies.