Pop up cart overlapping logo mobile

Store Design
, ,

Topic summary

A mobile-specific layout issue where the pop-up cart overlaps the site logo in the header.

Problem Details:

  • Occurs only on mobile devices
  • User is working with the Dawn theme
  • Visual reference provided via screenshot

Proposed Solutions:
Two community members offered CSS fixes targeting the .cart-notification-wrapper class:

  • Solution 1: Add position: relative; and z-index: 10000;
  • Solution 2: Add z-index: 4; via Custom CSS in theme settings (Online Store > Themes > Customize)

Both approaches adjust the stacking order to prevent the cart from appearing above the logo. The discussion remains open with no confirmation of which solution was implemented or resolved the issue.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

The pop up cart it overlapping with the logo of the header. It’s only on mobile.

I’ve added a picture. I use Dawn theme.

www.detailking.nl

2

hi there,
you can fix your problem by adding z-index: 10000 to this class name “.cart-notification-wrapper”:

.cart-notification-wrapper {
    position: relative;
    z-index: 10000;
}

if you have any questions don’t feel free to ask.
good luck

3

hi @Detailking

You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.cart-notification-wrapper .cart-notification { z-index: 4; }