Twenty Eleven: admin bar conflicts with the #branding element at screen sizes 782px and below

[designsimply]

The #branding element in Twenty Eleven overlaps the #wpadminbar element and makes menu items unclickable and untappable for screen sizes 782px and smaller—this includes iPad in portrait mode.

Steps to reproduce:

1. Set up a blog using WP trunk and the latest stable version of Twenty Eleven
2. Log in
3. Open the home page
4. Scroll until the #branding element overlaps the #wpadminbar element
5. Try to click any of the menu items in the admin bar that overlap with the #branding element

• Expected: the admin bar to stick to the top of the page and be useable even on small screen sizes
• Actual: the #wpadminbar falls below the #branding element in Twenty Eleven and the conflict makes the admin bar elements unusable

Here is a screencast: ​https://cloudup.com/cQegtmr_uBQ (Length: 1:43)

Tested with WP r30212 and Twenty Eleven version 1.9 while logged in on an iPad iOS 8.0.2 portrait only (landscape is fine), Chrome 38, Firefox 33, and Safari 7.1.

[designsimply]

Ah, wait! And props shawnajroberts for the original bug report. :)

[tywayne]

This is not specific to Twenty Eleven. Possible duplicate of #29867

[lancewillett]

Is this something to fix in core or the theme?

[tywayne]

Duplicate of #29867, fixed in 30764.