WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
unresponsive navbar menu on ipad (landscape mode) (8 posts)

  1. olewnikj
    Member
    Posted 2 months ago #

    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

  2. rdellconsulting
    Member
    Posted 2 months ago #

    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.

  3. rdellconsulting
    Member
    Posted 2 months ago #

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

  4. olewnikj
    Member
    Posted 2 months ago #

    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 1024x768. How would I force the collapsible menu to appear sooner.

    Thanks,

    Jon

  5. rdellconsulting
    Member
    Posted 2 months ago #

    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

  6. rdellconsulting
    Member
    Posted 2 months ago #

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

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

  7. olewnikj
    Member
    Posted 2 months ago #

    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

  8. rdellconsulting
    Member
    Posted 2 months ago #

    Give this a try:

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

Reply

You must log in to post.

About this Theme

About this Topic