Wordpress dropdown menu z-index issue

Everything concerning the Wordpress/Joomla/Drupal plugins
Post Reply
User avatar
3DV
Posts: 67
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Tue Dec 15, 2015 1:59 pm

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?
http://www.3dv.nl - Artist impressions and animations
http://www.vrtourviewer.com - Enjoy Pano2VR tours on Oculus Go, Rift, Gear VR, Daydream and Cardboard
User avatar
Hopki
Gnome
Posts: 9921
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Tue Dec 15, 2015 3:08 pm

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
User avatar
3DV
Posts: 67
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Tue Dec 15, 2015 4:00 pm

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.
http://www.3dv.nl - Artist impressions and animations
http://www.vrtourviewer.com - Enjoy Pano2VR tours on Oculus Go, Rift, Gear VR, Daydream and Cardboard
User avatar
3DV
Posts: 67
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Fri Dec 18, 2015 11:42 am

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.
http://www.3dv.nl - Artist impressions and animations
http://www.vrtourviewer.com - Enjoy Pano2VR tours on Oculus Go, Rift, Gear VR, Daydream and Cardboard
Post Reply