Support » Themes and Templates » Mobile format menu havoc!

  • I recently made some modifications to the Superhero theme to make its appearance match the non-blog sections of a website. The mobile format was not playing nicely with the modification I made, slamming the menu onto the left side of the header and losing several menu options below the bottom line of the header.

    I did some research and removed the <meta name=”viewport”… line from the header.php file, and this fixed it for most mobile browsers I have tried (as well as when I load it in an extremely narrow browser window). However, one of my mobile phone’s browser’s (Nokia’s default browser in Belle) and, depending on which IE browser testing site I’m using, possibly a few older versions of IE still render it this way.

    Can anyone help me track down the original code that’s causing the header to contract in such an ugly way? It appears to have some CSS that activates at narrower widths.


Viewing 6 replies - 1 through 6 (of 6 total)
  • The theme uses @media queries in the CSS code – starting on about line 1130. Hopefully you are using a child theme for these kinds of modifications to a theme — if not, your changes will be overwritten and lost when the theme is updated.

    Thanks for the quick response.

    I migrated to a child them now—I wasn’t aware theme updates installed automatically, so didn’t think it would be necessary. Thanks muchly for the tip. I’d hate to have to do all that over again…

    Removing the @media queries didn’t solve the problem, unfortunately. Here’s an image of what’s happening:

    Getting rid of the media queries at least lets the page be zoomed out, now, but I’d prefer it if the .nav didn’t move at all when the page was narrowed. Any suggestions about how to make that stop happening?

    And again, thanks very much!

    You can also replicate the problem by pulling up the blog ( and then narrowing the window.

    I’ve tried removing or altering the classes that have something to do with “small-menu” and “menu-toggle” and that isn’t fixing it.

    Moderator Andrew Nevins


    Forum moderator

    Use this CSS;

    @media screen and (max-width: 480px) {
     .main-small-navigation .menu {
      display: block;
     .site-navigation {
      display: none'

    In future it may be better for you not to use a mobile theme.

    That code’s still not stopping the change.

    I appreciate the suggestion, but the description of Superhero doesn’t give any indication that it includes mobile formatting, and especially not indomitable mobile formatting. It’s also the only theme that was otherwise easily adaptable to the site’s existing design.

    I tried setting a min-width on the masthead and/or it’s subset .divs and that didn’t work, either. Any other possible solutions in sight?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile format menu havoc!’ is closed to new replies.