Twenty Fourteen: Responsive CSS for masthead causes overlap with admin-bar

[johnjamesjacoby]

When resizing a browser window between the 781 and 783 pixel range, it's possible to get either the WordPress Admin Bar or the TwentyFourteen Masthead in alternate states of responsiveness, where one bar calculates styles for 782 or less, and the other calculates styles for 782 or greater.

Attaching screenshot, and eventually a patch.

[johnjamesjacoby]

Highlighted with inspector to show off the problem

[johnjamesjacoby]

FYI - Patched from the root of the twentyfourteen theme rather than the WordPress root, as I noticed this on a non-standard installation.

[lancewillett]

Maybe the WP toolbar should change its behavior, instead. :)

I'd suggest looking at this in Twenty Fourteen for 1.1 (after 3.8 release).

[lancewillett]

Thanks for the report and patch, JJJ. Since we aren't in freeze yet, we'll do our best to get this fix in.

[lancewillett]

Looked at all the core admin CSS and JS cases of 782 pixels as a breaking point, they are doing it right with 782 as the maximum width value. "This number or lower."

The theme CSS is doing it wrong, the number should be 783 or higher.

[lancewillett]

In 26831:

Twenty Fourteen: fix breakpoint at 782 pixels wide to exactly match WordPress toolbar breakpoint. Props jjj, fixes #26501.

[johnjamesjacoby]

Thanks Lance!

[lancewillett]

Replying to johnjamesjacoby:

Thanks Lance!

Oh crap, I used an incorrect WP.org username for your props. Sorry johnjamesjacoby.