The main menu on my site is a horizontal menu bar with vertical drop-downs, powered by nice-menus.

When I have the juicebox gallery displayed, the drop-down menus are visible but inaccessible, because when I move the mouse over the drop-down menu it activates the juicebox controls.

Is there a way to give nice-menus priority over juicebox?

Comments

rjacobs’s picture

rjacobs commented
Category: Bug report » Support request

Hi nsjski,

This is most likely related to the z-index settings (in CSS) for various divs within your theme and nice menu. The Juicebox javascript library uses a pretty high z-index (around 3000) for some of it's elements, and that's not something that this Drupal module has much control over. You could however reduce the z-index of the Juicebox gallery's parent element to something below that of nice menu, or increase the z-index of nice menu to something very high (say 9999). The way all this plays out can be a little tricky, and sort of depends on how various divs are nested within your layout, but a little hacking-around within your CSS may do the trick.

To lower the z-index of the Juicebox gallery's parent element (pulling everything inside it down in the stack order as well) you could try css like:

.juicebox-parent {
  position: relative;
  z-index: 0;
}

Depending on your layout that may or may not work, and you may instead have to try adjusting the z-index of whatever wrapper div nice menus uses.

Do you have a public link to the gallery? That's always useful.

nsjski’s picture

nsjski commented

Thanks, I'll give that a try. Also thanks for the quick response.

At the moment the gallery is here http://www.paccsa.org/photos/907 It's still in development so it might move.

nsjski’s picture

nsjski commented

You got it! This does the job:

ul.nice-menu, ul.nice-menu ul {
position: relative;
z-index: 10;
}

Thank you.

nsjski’s picture

nsjski commented

Sorry, I spoke too soon. My fix worked in the firebug CSS editor, but when I put the fix into my real CSS file it didn't do anything. :-(

rjacobs’s picture

rjacobs commented

My fix worked in the firebug CSS editor, but when I put the fix into my real CSS file it didn't do anything

If you are using CSS aggregation (via the settings in admin/config/development/performance) then you'll need to clear your site's caches before the new CSS will get used. You may also need to do a full forced-refresh in your browser to clear it's caches as well.

nsjski’s picture

nsjski commented

It really is fixed this time!

I'm not sure what went on in firebug. Anyway, I just needed to set the z-index of the larger container divs, and did not need to touch juicebox CSS. I set the z-index of the menu's container div to be higher than that of the main content area's container div.

Google of nice menus and z-index led me to https://drupal.org/node/1054416 It seems that nice-menu drop-downs disappearing behind main content is a fairly common issue with javascript displays in the main content area.

rjacobs’s picture

rjacobs commented
Title: Conflicts with nice-menu drop-downs » Conflicts with nice-menu drop-downs (can be solved with CSS z-index adjustments)

Great to hear. Can you share the specific CSS addition that you made? This could be a useful reference for anyone else using both these modules and finding this existing issue report.

rjacobs’s picture

rjacobs commented
Status: Active » Fixed

I'm going to go ahead and mark this as fixed. nsjski, if you see this and are able to share that specific CSS, please feel free to do so even after it's closed. It may be a useful reference.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rjacobs’s picture

rjacobs commented
Related issues: +#2277647: Superfish menus display over full screen mode

There are some additional notes about this topic at #2277647: Superfish menus display over full screen mode. Those notes further explain how this module is involved in (or often not involved in) the layering of gallery elements on the page. That may also be useful for anyone encountering this kind of problem.