How to fix a bar or banner that overlaps my cart drawer or a dropdown menu

In a small number of themes, the bar or banner may overlap the slide-out cart drawer or dropdown menu. You can fix this by lowering the bar or banner’s priority (z-index) in your stylesheet.

To resolve this issue, follow the steps below:

Step 1: Open your Shopify theme code

1. In your Shopify admin, go to Online Store → Themes
2. Click ••• (three dots) on your active theme
3. Click Edit code

Step 2: Open your main CSS file

Open one of the main stylesheet files. Depending on your theme, this is usually one of the following:

• assets/base.css         
• assets/theme.css         
• assets/styles.css         

Scroll to the bottom of the file.

Step 3: Add the custom CSS

Paste the following code at the end of the file:

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

Then click Save.

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