How do I fix mobile side menu overlapping product images?

Hey Guys!

My side menu overlaps a section of my product images in mobile view. The overlapping occurs only in the product pages and NOT the home page. I have installed and uninstalled apps before. I do occasionally add some custom code to the theme myself, but it is nothing that I can attribute this issue to (- also I am a programmer so I do understand what code to touch and what code to leave alone).

My shopify store: www.supawo.com
Theme: Dawn

Can anyone recommend an easy fix to this? Thanks a lot.

Hi @desert-shinobi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

My shopify store: www.supawo.com

Hi @BSS-Commerce ,

My shopify store: www.supawo.com (not password protected). I would really appreciate your help.

Hi @desert-shinobi

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

  1. Find the file base.css or base.scss.liquid and add this code at the end of the file
@media screen and (max-width: 989px) {
  #MainContent{
    z-index: 1 !important;
  }
}

Hope this helps you.


BSS Commerce - Shopify Apps & Development Services Provider

Level up your Shopify store with our B2B & B2C apps