WordPress.org

Ready to get started?Download WordPress

Forums

Mobile format menu havoc! (7 posts)

  1. bibliohead
    Member
    Posted 1 year 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.

    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year 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.

    http://codex.wordpress.org/Child_Themes

  3. bibliohead
    Member
    Posted 1 year 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:

    http://bibliohead.com/img/mobilemenuproblem.jpg

    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
    Member
    Posted 1 year ago #

  5. bibliohead
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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
    Member
    Posted 1 year 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

Tags

No tags yet.