Impulse Theme: Mobile Menu blocked by product images and featured product Block

Store Design

Topic summary

Mobile menu overlay in the Impulse theme is being visually covered by product images/Featured Product sections on mobile (observed on iPhone 12 Pro Max, reproducible on homepage and product pages when opening the menu after scrolling). The request is for a simple CSS fix to ensure the menu overlay stays above other elements.

Proposed fix: Add CSS to lower the stacking order of the product slideshow so the menu overlay can sit on top:

  • .product-slideshow { z-index: 9; }
  • Place this at the bottom of Assets > theme.scss.liquid.

Explanation: z-index controls the stacking order of overlapping elements; a lower z-index ensures the slideshow sits behind the menu overlay.

Assets: Screenshots illustrating the overlap were provided via a ZIP file due to upload limitations.

Status: A solution has been suggested, but effectiveness has not yet been confirmed by the original poster; discussion remains open.

Summarized with AI on February 17. AI used: gpt-5.
1

hello everyone!

I seem to be running into a strange issue whenever opening the impulse theme mobile menu when the “featured product” block or product page are showing product images.

Unsure why I can’t attach images here but I will attach the two screenshots as a zip for you guys to see. I took the screenshots off of my iPhone 12 Pro Max.

is there an easy way such as with CSS to ensure that the mobile menu will always stay on top of other webpage elements when the overlay is present?

you can view this by scrolling a bit down on the homepage or looking at any product page followed by opening the mobile menu.

my website is https://vhhess.com

2

@CaelanB ,

.product-slideshow {
    z-index: 9;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid