I've got a page where a plugin seems to be overriding the z-index of my dropdown menu element in mobile. The dropdown is set to z-index: 100;
and it works for all other pages, but on the one page I have a plugin, the plugin shows over the menu when it's dropped. Either the plugin z-index is set to 100, or it's overriding z-index of the dropdown menu.
因此,我找到了插件ID并将其作为目标,但没有用。
#wpcf7-f337-p187-o1 {z-index: 98;}
首先,我定位了容器元素,但没有用,然后是容器元素,接着是类,却没有用,然后像下面这样的特异性:
.entry-content>.wpcf7{z-index: 98;}
没工作
因此,我在该页面中将主体设置为z-index 98,但是没有用。
body.page-id-187{z-index: 98;}
没用
Both .dropdown-menu
and the container .collapse
are set to z-index 100, background-color: white like so:
@media(max-width: 768px){ul.dropdown-menu li a{position: relative; left: 55px; text-align: unset; font-size: 38px !important; background-color: white; color: black !important; line-height: 30px !important; padding: 0px !important; width: unset !important; margin-left: unset !important;z-index: 100;}}
所以:
@media(max-width: 768px){.collapse {position: absolute; height: 775px; background-color:white; z-index: 100; top:75px; left: -50px; line-height: 10px;}}
HTML
<div class="entry-
content"><div role="form"
class=
"wpcf7" id="wpcf7-f337-
p187-o1" lang="en-US"
dir="ltr">
<div class="screen-reader-
response"></div>
<form
action="/contact/#wpcf7-
f337-p187-o1" method="post"
class="wpcf7-form"
novalidate="novalidate">
<div style="display:
none;">
<input type="hidden"
name="_wpcf7" value="337"
/>
<input type="hidden"
name="_wpcf7_version"
value="5.1.3" />
<input type="hidden"
name="_wpcf7_locale"
value="en_US" />
<input type="hidden"
name="_wpcf7_unit_tag"
value="wpcf7-f337-p187-o1"
/>
<input type="hidden"
name="_wpcf7_container
_post" value="187" />
</div>
<p><label>NAME<br />
<span class="wpcf7-form-
control-wrap your-name">.
<input type="text"
name="your-name" value=""
size="40" class="wpcf7-
form-control wpcf7-text
wpcf7-validates-as-
required" aria-
required="true" aria-
invalid="false" /></span>
</label></p>
<p><label>EMAIL<br />
Mobile page here