WordPress.org

Support

Support » Themes and Templates » unresponsive navbar menu on ipad (landscape mode)

unresponsive navbar menu on ipad (landscape mode)

  • Hi,

    I am wondering if anyone else is getting this issue. My navbar menu is almost totally unresponsive in landscape mode on an ipad 2 running ios 7.1. I have also tested on an ipad mini and the problem is also occuring.

    at first I though it may be due to my customizations, as I have added a couple of buttons to the navbar menu etc. I have no removed all customisations / disabled all plugins and this is still happening. Does anyone have any ideas as to what could be causing this issue?

    Also does anyone know how I can force the navbar to collapse earlier so that on an iPad in landscape mode the mobile style menu appears rather than the full menu. I have experimented with @media queries but am not having much luck.

    any suggestions would be much appreciated.

    Thanks,

    Jon

Viewing 7 replies - 1 through 7 (of 7 total)
  • Link to site?

    You’re correct about @media, did you read this yet?

    The breakpoint is determined by Twitter Bootstrap at 979/980px. Difficult (& incorrect) to change that but the correct @media should overcome any problems.

    I’ve posted a sample template you can examine which covers your iPad use-case here

    apologies for not adding the link.

    This issue seems to be affecting both my sites, running the latest versions of the customizr theme.

    this site currently has all customizations removed / plugins disabled.

    http://www.littlereddings.org.uk

    The other is currently live and is still affected but still has all plugins / customizations applied.

    http://www.busheymeads.org.uk

    I have has a look at the article you mention as I have seen numerous posts relating to it.

    I’m not sure what I need to set to determine the break-point.

    I know an iPad in portrait has a resolution of 1024×768. How would I force the collapsible menu to appear sooner.

    Thanks,

    Jon

    Little Reddings, I can’t see any CSS rules being picked up in Firebug. Something isn’t set up correctly.

    Bushy Meads, there is a style sheet. The only @media in place is

    @media (max-width: 767px) {
    .span9.article-container .round-div, .span6.article-container .round-div {
        border-color: rgba(0, 0, 0, 0);
    }
    }

    There is further code after that, but it isn’t within the scope of the @media. Beware of the final }. Should look like:

    @media {
         .selector {}
         .selector {}
         .selector {}
    } /* Must cover the span of the required css */

    Check out the template above

    I know an iPad in portrait has a resolution of 1024×768. How would I force the collapsible menu to appear sooner.

    What is forcing you to want to do that? Wrong approach!

    I have worked out what was causing my menu issue.

    The top level menu items had a blank URL which for some reason on the iPad prevents the menu from dropping down.

    I have added a ‘#’ to each of the top level menu items so that they can drop down.

    The reason I want to change the iPad so that it gets the mobile menu in landscape mode is so that they don’t get the full navbar menu like on a desktop site. It doesn’t seem to fit nicely as I have a large number of menu items causing some of the items to push down onto another line.

    Have you got any ideas as to what I could do to fix this issue, or force the mobile style menu for smaller resolutions.

    Thanks,

    Jon

    Give this a try:

    @media all and (min-width: 768px) and (max-width: 1024px) {
    
      .navbar.resp {
        display: block;
      }
      .navbar.notresp {
        display: none;
      }
    
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘unresponsive navbar menu on ipad (landscape mode)’ is closed to new replies.