I have created a child theme for Twenty-Thirteen and somewhere while editing it I broke the mobile menu slider as it no longer pushes the content down and instead displays behind the content. I've changed the CSS in someway to cause this issue but I cannot find what has caused it. I am hoping that the cause will be more apparent to someone more familiar with CSS than I.

To view this issue you must resize your browser to width of less than 700px or so and click the menu button revealing the slider menu and the content overlap issue. Note how the H1 tag "Quad Cities, Chicago, Des Moines Photographer Brian Barkley" is over top menu.

Here is a link to the site: http://barkleyphoto.com/_wedding/ and here's a copy of the stock twenty thirteen to help compare http://twentythirteendemo.wordpress.com/

Here's an image to see for yourself what I am speaking of. enter image description here

1 Answer 1


You've got a static height set on a block-level element:


 * 4.1 Site Header
 * ----------------------------------------------------------------------------

.site-header {
    position: relative;
    background: url(http://barkleyphoto.com/_wedding/wp-content/uploads/2014/05/cropped-header-background.jpg) no-repeat scroll top);
    height: 100px;

remove the height: 100px; and it should work like you expect.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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