[ad_1]
I have a problem and that is that the dropdown menu is seen behind the content only on “WooCommerce” pages, since it looks fine on the static pages of the site. I already tried modifying the “overflow” in the section settings, and also setting higher z-indexes, but nothing works. If anyone can give me more ideas as to what may be causing the problem, I would appreciate it.
https://preview.redd.it/bj3ety57xcpc1.png?width=1476&format=png&auto=webp&s=b543b386d86816db3d5565985582887b62f744e4
[ad_2]
try using position:relative to parent container.
This is not going to be easy. It could be because of many many things.
Before you do anything check that your theme is not causing that issue or check if any plugins are not causing the issue.
Turn off each plugin one by one. Also u might need to try the standard WordPress theme.
First try that, if it doesn’t work then u have to do this :
use the Inspect Elements tool from browser and look at the dropdown and any overlapping material. It could be maybe that there is a styling issue in WooCommerces that is hijacking the changes u are making.
Also look at JavaScript that it is not adding inline styles or classes.
also try to maybe enhance the CSS selectors and make them more detailed.
let me know what Happens
z-index is tricky. Lots of times the z-index of the container is screwing with things. I’d make sure the z-index of that whole header is higher than that of the content area below it.