unresponsive navbar menu on ipad (landscape mode)

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.

https://www.littlereddings.org.uk

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

https://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;
  }

}