I'm struggling in finding the code that initiates the animation process for the header front page of Twentyseventeen. I would like to see it.

All I know is that when the animation is over, it adds an inline attribute of margin-bottom:.... on the following elements: .custom-header and .site-branding

I'm on wordpress 4.9.2

Thanks for any tips


Looks to be global.js, in the adjustHeaderHeight() function at lines 92 - 97

// The margin should be applied to different elements on front-page or home vs interior pages.
if ( isFrontPage ) {
    $branding.css( 'margin-bottom', navigationOuterHeight );
} else {
    $customHeader.css( 'margin-bottom', navigationOuterHeight );

It sets the margin-bottom to the equivalent of the top navigation menu's "outerHeight" (as defined and measured earlier) and seems to be based on the assumption that you're probably going to have a 1 line menu that will be 70px tall, since the theme CSS is for a 70px bottom margin. The script overrules that setting.

If you have no top menu, then site-branding transitions 70px (to 0 margin-bottom) in .2 seconds (.site-branding {transition: margin-bottom 0.2s} (shortened)).

Oddly, the measure for outerHeight is on my default testing installation 72px - so there's a 2px jitter after I add a short menu. On multi-line menus it starts to have problems with overlap.

Anyway, I've never looked at this before, but it doesn't strike me as one of Twenty Seventeen's better worked-out capacities. Maybe the designer/developers just liked the animation effect that the default installation - prior to creation of any top menus - shows.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.