Viewing 17 posts - 1 through 17 (of 17 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



    @atlantchiropractic 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,

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.