My header is collapsing with product page in mobile view when i make my header transparent help me

Topic summary

A Shopify store owner reports that their transparent header works correctly on desktop but collapses with product images on mobile view.

Multiple solutions proposed:

Several community members offered CSS-based fixes, primarily involving:

  • Adding custom CSS code to theme.liquid file (before </head> or </body> tags)
  • Modifying component-slider.css with media queries targeting mobile screens (max-width: 749px)
  • Adjusting base.css with positioning rules for the sticky header wrapper

Common approach:

Most solutions involve:

  1. Navigating to Online Store → Themes → Edit Code
  2. Locating specific theme files (theme.liquid, base.css, or component-slider.css)
  3. Adding CSS rules to adjust header positioning and padding on mobile devices

Status: Multiple solutions provided with screenshots showing expected results, but no confirmation yet from the original poster on which solution resolved the issue. The discussion remains open pending user feedback.

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

i have created my store header transparent and works very well on desktop view but it doesn’t working properly on the mobile view it collapsing with the product image in mobile view


my store url

2 Likes

Hey @odejia9587

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

Hi @odejia9587 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like

Hello @odejia9587
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slider.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.slider.slider--mobile .slider__slide {
padding-top: 4.5rem;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
  • Here is the solution for you @odejia9587
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like

@odejia9587 Please follow below steps to properly align header and product images on mobile view. Let me know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.

  1. Go to “base.css” file.

  1. Paste the below code at the bottom of the file and save changes.
sticky-header.header-wrapper {
    position: relative !important;
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.