Wordpress Twentythirteen Dropdown Menu Not Working on iPhone

Question

The nav menu on my Wordpress Twentythirteen theme-based site works fine, in the normal horizontal fashion, at desktop/laptop/iPad window sizes. Here's the URL:

http://www.radionowhere.net/sandbox

When viewed on an iPhone, it collapses to the word "Menu", accompanied by a down arrow, which, when clicked, is supposed to display all the pages linked to in the nav menu in one vertical column, which displaces the rest of the page content below it.

In its current state on my site, however, clicking the "Menu" link on an iPhone causes only the first two page links to appear, and instead of displacing the rest of the page as they should, they sort of overwrite it instead. It's a mess.

I'm guessing this may have something to do with modifications I've made to the positions of various divs in the file "home.css", but can't figure out exactly how to address the issue.

Any ideas welcome - thanks!

Answer 1

In home.css, you have

@media (max-width: 550px){
    ...
    #masthead {
        height: 170px;
    }
    ...
}

When the menu button is clicked and a dropdown menu is formed, the header (#masthead), which wraps the menu, must expand as well. Fixing #masthead at 170px prevents it from expanding. Try replacing this with

@media (max-width: 550px){
    ...
    #masthead {
        height: 100%;
    }
    ...
}

which allows the header to expand to contain all of its children, including the menu.

Hope this helped and good luck!