How to make header transparent in Dawn theme on mobile?

Shopify Discussion

Topic summary

A user needed help making their Dawn theme header transparent on mobile devices, as it was already working on desktop.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • Primary solution (marked as working): Add CSS code to theme.liquid file above the </body> tag, targeting the index template with media queries for mobile screens
  • Alternative approach: Use Custom CSS in theme settings with @media screen and (max-width: 749px) to set header background to transparent, adjust positioning to absolute, and modify text/icon colors for visibility
  • Additional considerations: Adjust z-index and margin-top for the first section to prevent layout issues when header overlaps content

Resolution:

The issue was successfully resolved using one of the provided code snippets. The solutions involve making the header position absolute with transparent background specifically for mobile viewports, while ensuring proper styling for header elements like navigation and icons.

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

Hi,

My header is transparent on the desktop, but it isn’t on mobile view. Can someone help me with this please?

URL: https://www.eastsidemelrose.com/

Password: opensesame

3 Likes
2

Hey @EastsideMelrose

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

{% if template == 'index' %}

{% endif %}

RESULT:

Moeed_0-1742303992073.png
Moeed_0-1742303992073.png352×763 10.7 KB

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

Best Regards,
Moeed

1 Like
3

Hello @EastsideMelrose

To make the header transparent on mobile in the Dawn theme, you’ll need to modify the theme’s CSS and possibly adjust the Liquid files. Try this method:

  1. Modify the CSS
    1.Go to Online Store > Themes > Customize.
    2.Click on Theme settings > Custom CSS and add the following code:
@media screen and (max-width: 749px) { 
    .header-wrapper {
        background: transparent !important;
        position: absolute;
        width: 100%;
        z-index: 10;
    }
    .header__heading-link, .header__icon, .header__menu {
        color: white !important; /* Adjust based on your design */
    }
}

This will make the header transparent and adjust text/icons for visibility.

  1. Adjust z-index for overlays
    If the transparent header causes layout issues, make sure the first section (like a banner) is positioned properly:
@media screen and (max-width: 749px) { 
    .shopify-section:first-child {
        margin-top: -var(--header-height);
    }
}
  1. Check the Theme’s JavaScript (if needed)
    Sometimes, Shopify’s Dawn theme adds a background on scroll. If this still doesn’t work, you might need to edit header.liquid to prevent background color changes via JavaScript.

Would you like help with that part too?

Thank you :blush:

4

HI @EastsideMelrose

{% if template == ‘index’ %} @media screen and (max-width: 767px) { header { position: absolute !important; width: 100% !important; background: transparent !important; max-width: 100% !important; } } {% endif %}

Use this code for make a transparent header :blush:

But I see your store is totally new. Just starting…

I did a project like this for my client a few days ago.

https://anisa.co.in/

Here is the store you can follow to build your store.

You will make sure it’s a converting design and includes Quantity Offers, Bundle, Upsell, and Downsell features.
So it will increase LTV and AOV. If the Bundle and upsell funnel works well, it will boom :collision:

5

You’re an absolute beauty, this worked perfectly!

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.