Page 1 of 1

Wordpress dropdown menu z-index issue

Posted: Tue Dec 15, 2015 1:59 pm
by 3DV
The dropdown menu in the header does show properly but menu content on top of the panorama canvas can't be selected.
Webpage: http://3dv.nl/interactieve_panoramas/ Try selecting 'Stereoscopie' from menu 'Techniek'.

With some help I've found it's a z-index issue that can be solved by finding the div container id with the main canvas and overriding it like this (in custom css of theme options):

div#container4203_4077 {
z-index: 0;
}

Is there a better way to do this so I don't have to do this manually for other panorama's too?

Re: Wordpress dropdown menu z-index issue

Posted: Tue Dec 15, 2015 3:08 pm
by Hopki
Hi,
I have made a note to the developers to look into this.
This has been reported before and changing the Z-Index was the solution.
However the problem is not seen with all Wordpress websites with drop down menus.
Is it something to de with our ggpkg or the Theme your using?
As said Im not sure so letting the developers have a look.
Regards,
Hopki

Re: Wordpress dropdown menu z-index issue

Posted: Tue Dec 15, 2015 4:00 pm
by 3DV
In this case I think it's the ggpkg, but probably only in combination with certain z-indexes in the used theme.

The main div that contains the divs with class "ggskin" and the canvas has an inline set z-index of 1000.
If I set that z-index manually (Firebug) to 0 the WordPress menu works fine again. But I'm not sure if that interferes with any skin stuff of the panorama.

I'm no CSS expert, but maybe if this main div can get it's own class name, then the z-index can be easily set with CSS by using that classname, regardless of where it is in the div hierarchy.
It's not a problem if the default is still 1000 then so you won't mess up cases where there are no problems.

Re: Wordpress dropdown menu z-index issue

Posted: Fri Dec 18, 2015 11:42 am
by 3DV
I've found a workaround for the issue (at least for my own use) by modifying the z-indexes of pano2vr_player.js inside the .ggpkg file.
Then I don't have to worry on which page the panorama is placed (for delivery to client for example) and don't have to add custom CSS style overrides.

I've changed the following z-indexes, the existing numbers seemed extremely high:
5000 = 5
1100 = 4
1000 = 3
900 = 2

Now the WordPress dropdown menu works fine, even when on top of a panorama. Panorama skin also seems to work fine.