setminHeightHeader resizing bug

  • I’ve done my best to find a previous post about this but no luck.
    I’m using a child theme of Zerif Lite and have come across a window resizing bug.
    I’ve created a gif to illustrate the bug:
    BUG

    I tracked the issue back to the zerif.js function setminHeightHeader():

    function setminHeightHeader()
{
    jQuery('#main-nav').css('min-height','75px');
    jQuery('.header').css('min-height','75px');
    var minHeight = parseInt( jQuery('#main-nav').height() );
    jQuery('#main-nav').css('min-height',minHeight);
    jQuery('.header').css('min-height',minHeight);
}

    I solved my issue by commenting out the last three lines:

    function setminHeightHeader()
{
    jQuery('#main-nav').css('min-height','75px');
    jQuery('.header').css('min-height','75px');
    // var minHeight = parseInt( jQuery('#main-nav').height() );
    // jQuery('#main-nav').css('min-height',minHeight);
    // jQuery('.header').css('min-height',minHeight);
}

    And here’s a gif illustrating the fix:
    FIX

    I’m unsure why setminHeightHeader sets the height of #main-nav and .header twice. As far as I can see it sets min-height to 75, stores 75 in minHeight, then sets min-height again (to 75).
    Moreover this doesn’t explain why my header was resizing. I’m guessing something to do with the size of the responsive logo?

    thanks, jhwd.

Viewing 3 replies - 1 through 3 (of 3 total)

  • These are there for specific reasons, which I won’t go into…

    var minHeight = parseInt( jQuery('#main-nav').height() );
    jQuery('#main-nav').css('min-height',minHeight);
    jQuery('.header').css('min-height',minHeight);

    …but commenting them out solves nothing.

    You really should be creating a Child Theme for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost.

    You should be able to over-ride these by putting them into the plugin and using “!important” with each change.
    Read: When Using !important is The Right Choice

    Moreover this doesn’t explain why my header was resizing. I’m guessing something to do with the size of the responsive logo?

    If it was the height of the logo, then it is probably the height of the logo image getting smaller and larger depending on the device viewed on.

    Thread Starter jhwd

    (@jhwd)

    thanks NeoTechnomad,

    I’m using a Child Theme at the moment, I’ll look into making these changes on that theme as opposed to the zerif lite theme.

    You could peruse this: A Guide to Overriding Parent Theme Functions in Your Child Theme

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘setminHeightHeader resizing bug’ is closed to new replies.