0

I'm currently trying to create a modal dialog with jQuery UI on a WordPress page.

My issue is that the WordPress header/navigation menu (div class:"main-header") is displayed above the modal overlay and the dialog itself.

I tried changing the z-index of the dialog from 101 to 9999, as well as adding position: relative, z-index: 10; to the main-header div's CSS, but to no avail.

Is there any way I can force the dialog and the modal overlay to be displayed above the menu?

Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
user80928
  • 1
  • 2
  • Have you tried using position: fixed and z-index: 999999 on the dialog? –  Jan 02 '18 at 21:51
  • see this [post](https://stackoverflow.com/questions/1118198/how-can-you-figure-out-the-highest-z-index-in-your-document) might help you track the issue – Muhammad Omer Aslam Jan 02 '18 at 21:58
  • Welcome to Stack Overflow. When you inspect each of the elements, is `z-index` being over written anyplace? – Twisty Jan 04 '18 at 19:49

0 Answers0