WordPress.org

Ready to get started?Download WordPress

Forums

Responsive menu not working (7 posts)

  1. thebaht
    Member
    Posted 1 year ago #

    I have installed twenty twelve and working on the site today and everything looks fine on a desktop and laptop but when viewed on an ipad or iPhone the menu is displayed on top of each other is there any way to get it to display the same way it does on a laptop?

    The site is http://wetrooms.mattyhatton.com

    Any help would be much appreciated!

  2. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi thebaht,

    Unfortunately the various browsers don't 100% comply with HTML standards, or they interpret the standards differently.
    With unpredictable results, as you have noticed.
    Things become even more difficult if you take into account the reduced screen sizes of phones / mobile devices.

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    The "on top of each other" of your case has 2 levels.

    First, it's the normal behavior of menu for small screen size, it's the theme's feature. The breakpoint is 600px.

    Second, your site's menu CSS looks perfect in normal screen width ( more than 960px ) but when scale it down, before the breakpoint, the menu stacks up into 2 lines, this should be adjusted.

  4. thebaht
    Member
    Posted 1 year ago #

    How do I adjust it when it is below the 600px?

    Thanks

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    First make a child theme, migrate all your mod to it, and then from now on any changes will be made in child theme only.

    Then decide if you really really want to change the small menu behavior in small screen less than 600px, if so then add this in the functions.php of your childtheme.

    add_action('wp_print_scripts','mytheme_dequeue_script');
    function mytheme_dequeue_script() {
    	wp_dequeue_script( 'twentytwelve-navigation' );
    }
  6. thebaht
    Member
    Posted 1 year ago #

    I have added the code but it doesn't seem to help, the menu still goes to two tier on screens less than 600px?

  7. paulwpxp
    Font hero
    Posted 1 year ago #

    As I posted earlier, there are 2 things going on. The normal mobile menu behavior of 2012 AND the fact that you align the li and li a with pixel, this causes the 2 tiers problem in screen lower than certain width (specifically, lower than 960px, that you designed it on).

    To fix the first issue is to take off the below 600px small menu mechanism, the code above is taking of the JS and still there are some CSS works to be done, mostly inside the menu containters, and it's a lot because the way 2012 is designed. You have to understand the html structure of menu and the media queries that go with it.

    The second issue could be fixed by assign the width as percentage and center align the text inside the liinstead, and use media quiery to make text smaller in small screen. Still you can't fit 5 menu items with that wordings into 320px width.

Topic Closed

This topic has been closed to new replies.

About this Topic