• Registered: 2012-05-16
  • Posts: 2

Topic: Navbar drop down menus don't work when overlapping embedded gallery

I started transitioning my simpleviewer pro galleries to Juicebox but I realized that my website's nav bar is practically unusable now.

Whenever you hover over a menu and try to descend to a submenu, the expanded menu disappears as soon as your mouse cursor is over the gallery. Any ideas? Here's a link to one to of my lesser-frequented galleries: http://brianwolfey.com/portfolio/kids.php

I'll be changing the remainder of the galleries back to simpleviewer Pro in the meantime.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Navbar drop down menus don't work when overlapping embedded gallery

Make your gallery's background transparent by setting the 'Background Color Opacity' to 0.
In JuiceboxBuilder-Pro, this setting can be found in the 'Customize -> Lite' section.
To make the change manually, set the 4th parameter in the backgroundColor embed code setting to 0, e.g.:

backgroundColor : 'rgba(34, 34, 34, 0)'

I see that you have already done this and your drop-down menu is no longer hidden by the gallery in IE9, Firefox 12, Chrome 19 and Safari 5.1.7 on my PC.
If you continue to see the drop-down menu being hidden by the gallery, try clearing your browser's cache before reloading the gallery.

  • Registered: 2012-05-16
  • Posts: 2

Re: Navbar drop down menus don't work when overlapping embedded gallery

Transparency wasn't the issue. Sure I could get the menu to display above the gallery but when you try to descend down the list to choose an item with your mouse, as soon as your mouse passes over the gallery the menu disappears.

Turns out it was a z-index issue. I set my #nav li to z-index:900; and that fixed it.

Thanks for the attention!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Navbar drop down menus don't work when overlapping embedded gallery

I'm glad you have found a solution to your problem.
Thank you for posting back to let me know.

  • Registered: 2013-02-14
  • Posts: 1

Re: Navbar drop down menus don't work when overlapping embedded gallery

What if you are using an image for the background instead?  Drop-down menus don't work in this instance either.

Can be seen here: http://www.essencebysheela.com/makeup/makeup.html

Thanks.

  • Registered: 2013-02-14
  • Posts: 2

Re: Navbar drop down menus don't work when overlapping embedded gallery

I am having the same issue. z-index is set high enough that the menu shows up over the gallery, but links on the nav only work above the gallery.

http://digidaze.com/drbowen/before-afte … index.html

z-index is set at 9999 on the CSS (both on main style sheet and on superfish menu style sheet). Any clues? Maybe I don't have the z-index in the right place? I just changed what was already there to be a higher number.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Navbar drop down menus don't work when overlapping embedded gallery

@ijordache

Try replacing the following line in your 'makeup.html' page:

<div id="dropmenu1_a" class="dropmenudiv_a">

... with:

<div id="dropmenu1_a" class="dropmenudiv_a" style="z-index: 999;">


@krissymac

I have not been able to determine the exact problem in your gallery but feel fairly sure that it can be resolved with appropriate 'z-index' values. Your menu should appear on top of your gallery if you:
(1) Remove all existing 'z-index' entries from your 'style.css' file.
(2) Change line 49 of your index.html page from:

<div class="container_12">

... to:

<div class="container_12" style="z-index: 999;">
  • Registered: 2013-02-14
  • Posts: 2

Re: Navbar drop down menus don't work when overlapping embedded gallery

@steven

Thanks so much - that worked. There was a header z-index overriding the menu z-index apparently that I missed. When I removed that and applied your solution to the template/index page, it fixed the issue. Thanks again!