The bar or banner is overlapping with my cart drawer

In a limited number of themes, the bar or banner may overlap with the slide-out cart drawer. This issue can be easily solved by lowering the priority (z-index) of the bar or banner in your stylesheet.

To solve this issue, please follow the steps below:

1. In your store admin dashboard, click  "Online Store"

2. Click the  "Actions" dropdown menu, then select "Edit code"

3. Search for your stylesheet file using the "Search files" field. The file usually has one of two formats, either "scss" or "css".

Select your file from the file explorer to begin editing.

4. Scroll down to the very end of the file, and paste the following on a new line:

.aph_bar_bar { z-index:0 !important; }

The CSS property z-index controls the stacking order of overlapping elements on a webpage. An element with a higher z-index value will appear in front of an element with a lower one. The above line of code sets the bar or banner's z-index to 0 to ensure the cart drawer’s z-index is higher. If the banner is overlapped by another element, you can increase this number.

5. Click  "Save" to save your changes.

Still need help? Contact Us Contact Us