• Registered: 2015-10-25
  • Posts: 7

Topic: css drop down issue [SOLVED]

i am working on a test page:
http://www.hollistercs.com/pages/retail … -2015.html

my css dropmenu overlays correctly since i have a high z-index,
however once it overlays the gallery i cannot select the options over it because the gallery images are to link to certain pages within the site as well.

is there a fix for this?

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

Re: css drop down issue [SOLVED]

I don't see a Juicebox gallery (or any Juicebox gallery embedding code) on the web page whose URL to provided.
However, I have found a few SimpleViewer galleries on your website.

If the problem you are experiencing is with your SimpleViewer-Pro galleries, then please see this FAQ in case it helps.
How do I display SimpleViewer under other elements on my HTML page, for example a drop-down menu?

Also, I notice that your SimpleViewer-Pro galleries are v2.2.0.
Please try upgrading your galleries to the latest version of SimpleViewer-Pro (v2.3.2) as many bugs have been fixed since v2.2.0.
Please see the Version History for a list of changes between versions.
Instructions for downloading the latest version and for upgrading existing galleries can be found on the Upgrading SimpleViewer-Pro support page.

If you are having trouble with embedding a Juicebox gallery on a web page, then please post the relevant URL so that IO can see the problem for myself and hopefully help further. Thank you.

  • Registered: 2015-10-25
  • Posts: 7

Re: css drop down issue [SOLVED]

sorry about that! i had to change it to a solution that was working
BUT i like your solution much better. especially for the mobile features you offer

i have placed a secondary hidden page up that shows the issue i am running into:
http://www.hollistercs.com/pages/retail … -2015.html

can you please take  a look at it and see if there is something i can do to make it work?

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

Re: css drop down issue [SOLVED]

Thank you for providing the URL to your Juicebox gallery's web page.
You just need to increase the z-index for your menu in order for it to be stacked on top of the gallery (and not hidden underneath it). A z-index value of anything above 500 should work fine.
Try adding the following CSS to the end of your web page's <head> section (after your menu's CSS has been loaded):

<style type="text/css">
    #dropmenuexp.dropmenudiv_c {
        z-index: 9999;
    }
</style>

Otherwise, search through your menu's own CSS for this id/class combination and modify the z-index there.
I've tested this with Firefox's developer tools and it should work fine.

  • Registered: 2015-10-25
  • Posts: 7

Re: css drop down issue [SOLVED]

Steven, thank you for your reply, however this is not the issue. i have the z-index set high enough
if you scroll over "Experience" you can see the sub nav diplays over the gallery. the issue is when i try to select either "retail" or "residential" from the sub nav. i cannot and it clears away.

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

Re: css drop down issue [SOLVED]

i have the z-index set high enough

The z-index for your menu is not quite high enough. It is currently set to 100 (in your 'slidingdoors-2.css' file) but it needs to be greater than 500 in order to be stacked on top of the gallery when a visitor hovers over a menu entry which overlaps the gallery.

the issue is when i try to select either "retail" or "residential" from the sub nav. i cannot and it clears away.

This is exactly the issue that I first saw and that my code above should fix.
As I mentioned, I tried the code in Firefox's developer's tools (setting z-index: 9999; dynamically on the #dropmenuexp.dropmenudiv_c container) and it solved the problem.

Please try adding the code to your web page and then clear your browser's cache before reloading your web page.
Be sure to add the code to the end of your web page's <head> section (so that it is not overwritten by the menu's own CSS).
If in any doubt, try adding CSS !important as follows:

<style type="text/css">
    #dropmenuexp.dropmenudiv_c {
        z-index: 9999 !important;
    }
</style>
  • Registered: 2015-10-25
  • Posts: 7

Re: css drop down issue [SOLVED]

perfect! it totally works now, i wasnt putting it on the dropdown only the main nav. that must have been the issue

thanks so much!

Melanie

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

Re: css drop down issue [SOLVED]

You're welcome!
I'm glad you've got it working. Thank you for posting back to let me know.