Wordpress dropdown menu z-index issue

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

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?
Ruud van Reenen
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
3DV
Posts: 145
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

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.
Ruud van Reenen
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
User avatar
3DV
Posts: 145
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

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.
Ruud van Reenen
3DV - Real estate artist impressions and animations
VR Tourviewer - Experience Pano2VR tours on Oculus Go, Quest, Rift, Pico and Cardboard VR headsets
Post Reply