Just today, I upgraded from 7.x-1.11-beta6 to 7.x-1.11-beta8, and now, in certain browsers, my drop-down menus no longer work – you can still click the main links, but sublinks don't appear when you mouse over (or single-click in iOS). In Chrome, everything is fine. But in Safari and Firefox, nothing happens when you mouse over the menu items (or click on them on an iPad).

This isn't an issue on the demo site (and, therefore, likely isn't an issue for fresh installs), but it seems like it could be an issue for updated versions of older installs. I tried replacing all of my CSS files with those from the most recent release, but that had no effect. Do you have any advice?

If it helps, the site is anglicancathedralcalgary.ca

Thanks!

Comments

Anonymous’s picture

A quick update: I've found that the drop-down menus begin working again when I remove "responsive.css" from the server. Perhaps there's a simple change that can be made to this file?

linwiz’s picture

I am also having issues with the dropdown menus not working. They work fine on a fresh install, but not on the installation that has been in use for quite a while. I don't even know where to start looking for a solution. no responsive.css on my server. I am running latest openchurch, upgraded with drupal 7.21 core.

Anonymous’s picture

OK, I've figured out a little more about this problem. It's not browser-specific. Instead, it's dependent on the browser window-size. If Chrome, Safari, or Firefox (all on Mac) are narrow enough (not full-screen) when the OpenChurch page loads, then the Superfish drop-down menus don't appear on mouseover. Also, on iPad, the menus don't appear on a single-tap like they used to.

I traced the problem to lines 26-38 in the responsive.css file. Removing these lines fixes the problem in all three browsers and on the iPad.

The relevant CSS lines are:

/* iPad: landscape. */
@media only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (max-width:1199px) and (min-device-width: 1100px) { 
  #block-superfish-1 {
    overflow: hidden;
  }
}

/* iPad: portrait. */
@media only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-width:768px) and (max-width:959px) and (min-device-width: 1100px) {
  #block-superfish-1 {
    overflow: hidden;
  }
}

Perhaps these can be rewritten for the next release? For now, I've just deleted them entirely.
Thanks!

drupalninja99’s picture

Priority: Normal » Major
Status: Active » Needs work

Hi there, well so you have figured out the issue. And the overall problem is that the menu doesn't work at all for mobile visually anyway. It's definitely a square peg in a round hole. I had to add this to keep the viewport from adding 10-20 px to the side which was annoying.

One thing I've been thinking ab adding is a dropdown navigation (bc it's relatively easy). See http://silver.he4139.vps.webenabled.net/. I am thinking since the dropdown doesn't take any space, maybe I should just place it at the top as opposed to making the user jump to the bottom. I want to try this out on dev. There are several improvements I need to make to make OpenChurch more mobile friendly and this is maybe the highest priority.

drupalninja99’s picture

OK I found that you are correct the menus aren't working. I am going to fix this with some css adjustments

drupalninja99’s picture

OK I have pushed this to 1x. I will retest when the dev packager finishes.

Anonymous’s picture

Thanks so much for your help with this! Having the navigation dropdown at the top sounds like a good idea, especially since it doesn't take up much space.

drupalninja99’s picture

Status: Needs work » Needs review

This is pushed now to openchurch 7.x-1.11-beta9

drupalninja99’s picture

Going to track progress for the mobile dropdown here - http://drupal.org/node/1949242

aminzamani’s picture

Hallo,

I have the same problem, but not on mobile devices, but on normal computer in every browser ( IE, Firefox and Chrome ). I can not see the navigation. Any ideas where the problem is? I also have accomplished the steps written here but it does not help. I have yesterday downloaded and installed opencurch 7.x-1.11-beta9. Here you can see it (http://www.jesus-is-god.de/drupal/ ). I have yesterday installed openchurch because our church would like to use it.

By the way: Before I yesterday uploaded the openchurch distribution to our server I have also tested it before locally on my machine and there it works fine without these problems of invisible menu . But as I installed it on our server the menue were not visible -;(. Maybe that helps to fix the problem knowing that it works on one system (local test env) but not on the prod system)

Thanks for you help and telling us where the problem is.

Thanks & God Bless You!!

Shalom
Amin

drupalninja99’s picture

@ aminzamani you need to clear your caches

drupalninja99’s picture

Status: Needs review » Closed (fixed)

Please update to beta10 where we have a shiny new dropdown menu.

aminzamani’s picture

Hi,

thanks for your reply. I always have my browser cache disabled. Which cache do you mean?