Cart behind sticky header

Store Design

Topic summary

A cart popup (ajaxify) was appearing behind a sticky header on screens 480px and below, making it inaccessible to users.

Solution provided:

  • Add custom CSS to theme.scss.css file
  • Use media query targeting screens ≤480px
  • Adjust .ajaxify-modal.is-visible positioning with top: 45px!important

Outcome:
The CSS fix successfully resolved the z-index/positioning issue, allowing the cart popup to display properly above the header on small screens.

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

Our cart pop up (ajaxify) is disappearing behind our header on small screens - 480px and below.

How do I fix the css?

image
image476×562 46.6 KB

2 Likes
2

Hi @ChrisW3

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.css and paste this at the bottow of the file:
@media screen and (max-width: 480px) {
    .ajaxify-modal.is-visible {
        top: 45px!important;
    }
}

image
image467×531 63.3 KB

3

That worked perfectly, thank you

1 Like
4

Hi @ChrisW3

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: