Home Forums Weaver Xtreme Theme Woocommerce menu on top of product image zoom

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #63890

    This post is to help anybody else experiencing this problem as described below;

    I recently added Woocommerce to my site to sell a few bits & pieces no longer required.

    After running for a while I noticed an error with product image zoom. On the shop page my menu is in the normal place just under the page(header) image, but, when I go to details of a product then click the magnifier to zoom the product image to full screen the menu bar appears on top of the image, it also does not scroll and stays in a fixed position.

    I contact Woocommerce support via wordpress forum support and they replied with this fix;

    • In your WordPress dashboard, go to Appearance and click on Customize.
    • Look down for the Additional CSS section and click on it.
    • In the box there, paste this:

    ·                 ·                .menu-secondary {·                    z-index: 1500;·                }

    • Publish your changes.

    The additional CSS code cures the problem on all devices.

    So Weaver to  Xtreme support, do you think you need a small fix for this, as you can see I use Menu-Secondary as my main menu.

    The problem can be viewed here and will be left unfixed for a few weeks.

    Menu on top of zoomed product image



    The theme sets the z-index of the menu to 2001 because it needs it under some situation

    Woocommerce image container has a z-index of 1500, because they assume that in most cases that would be enough to be over everything.

    These conflict are unavoidable as you can never know what each side would expect.

    But the way to fix it is not by lowering the theme one, but by raising the Woocommerce one.

    Instead of the rule they gave you, insert the rule below to the theme Global Custom CSS Rule box

    .pswp {z-index:2010 !important;}



Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.