Mobile format menu havoc! (7 posts)

  1. bibliohead
    Posted 3 years ago #

    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.


  2. WPyogi
    Forum Moderator
    Posted 3 years ago #

    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.


  3. bibliohead
    Posted 3 years ago #

    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!

  4. bibliohead
    Posted 3 years ago #

  5. bibliohead
    Posted 3 years ago #

    You can also replicate the problem by pulling up the blog (www.bibliohead.com/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.

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Use this CSS;

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

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

  7. bibliohead
    Posted 3 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.