Mobile not working – twenty twelve theme

I too am having a problem with the “menu button” that appears in place of the page navigation on both iPhone and Android devices. I deactivated all plugins to no avail. I have contacted the host provider and they claim using only simple host support with nothing special for mobile devices.

Here’s the site: actannapolis.org

The site is working well on iPad and other tablets. Just not phone devices.

Also, my test site actannapolis.info does work correctly!

Thanks so much for any pointers! –Richard

@actannapolis, your problems are similar, although you had the foresight to create a child theme. Some of the changes you made to your child theme’s header.php file are possibly the source of the problem. I see that the IDs of the menu containers were changed; did you also make the corresponding change to the JavaScript event trigger that toggles the menu?

I’ve created a child (of Twenty Twelve) theme for 8 or 9 websites and the navigation suddenly stopped working on the iPhone. “Menu” appears, nothing happens when you click on it. The navigation on all these sites worked until very recently. Any thoughts?

Most of the excess space is caused by this CSS rule:

#FollowMeBubble{
   width:331px !important;
   position:absolute !important;
   left: 38% !important;
   top:200px !important;
   z-index:10000 !important;
   border-bottom:none !important;
}

Not sure why this rule is even needed because there’s an inline style which sets the visibility of #FollowMeBubble to hidden. However, to play it safe, if you just remove the left property from the above rule, that will eliminate most of the excess space without affecting the functionality of the tab.

The rest of the excess space comes from the footer menu. For some reason, there’s inline styling which sets various properties of wp_footer_menu DIV, including setting the padding-left to 250px. Not only that, the properties are set using the !important clause. Two big no-no’s when it comes to web design is using inline styles and unnecessary use of the !important clause, because it makes it very difficult, and sometimes impossible, to override using CSS. Anyway, it’s the padding-left of 250px which is pushing the menu out to the right, causing the excess space on the right. You can see the footer menu looking kind of squashed to the right on a phone.

So, what I would do is take the inline style out and move it into the stylesheet, removing the !important clauses. However, instead of carrying over the padding-left, I would set the margin-left & margin-right of the unordered list (and take the inline style out of the unordered list) to auto so the menu stays in the center:

#wp_footer_menu {
   border: 1px solid #9db5cc;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background-color: #909090;
/* padding-left: 250px;  removed */
   padding-bottom: 25px;
   padding-top: 25px;
}

#wp_footer_menu ul {
   margin-left: auto;
   margin-right: auto;
   display: table;
}

For those of you who are having problems with the mobile menu, it looks like there’s a solution in this thread, but make sure you create a child theme first.