How to add announcement bar on top of transparent header? Dawn theme

Store Design
,

Topic summary

Main issue: After making the Dawn theme header transparent on the homepage, the announcement bar is overlapped/hidden, leaving a white gap at the very top. Screenshots and code snippets are central to the discussion.

Diagnosis: The transparent header overlaps the announcement bar due to positioning, padding, and stacking (z-index), causing layout spacing issues.

Proposed solutions:

  • General CSS adjustment to remove extra padding and ensure the announcement bar sits above the header.
  • A detailed fix suggests making the entire header section (#shopify-section-header) position: absolute at top with z-index, and setting both the announcement bar and header backgrounds to transparent; also adjusts text color/shadow for contrast.
  • Another approach adds CSS in theme.liquid for the homepage: force transparent header background and use negative margin-top on #MainContent (with a mobile breakpoint) to pull content up.

Updates/outcome:

  • After applying the first detailed fix, the header was no longer transparent, so it didn’t meet the goal.
  • The store URL was shared (bipperly.com) for further review.

Status: No confirmed working solution yet; the goal remains a transparent header with the announcement bar fixed at the very top on the homepage.

Summarized with AI on December 11. AI used: gpt-5.
1

Hello,

I added the code bellow to make my header transparent. The problem is that now the announcement bar is covered by it and i have an empty white space at the very top of the page and i want to remove this space..

Kind regards, Bipperly

image
image1911×742 154 KB

{% if template == ‘index’ %}

.shopify-section-group-header-group.announcement-bar-section{ height: 5px; } .header-wrapper{ position: absolute; width: 100%; background: transparent; } .header-wrapper .header{ margin-top: 20px; }

{% endif %}

1 Like
2

This usually happens because when the header becomes transparent, the announcement bar and header overlap leaving that white space at the top.

You can fix it by adjusting your CSS to remove the extra padding and make sure the announcement bar sits correctly above the header.

3

Hello, @Bipperly

The solution is to make the entire header section (including the announcement bar) float over the page content and then make both of their backgrounds transparent.

Here is the corrected code that will achieve the look you want.

  1. Inside the Assets folder, find and click on a file named base.css or theme.css.

  2. Scroll to the very bottom of this file. It’s always best practice to add custom code at the end.

  3. Delete the old code you added and replace it with the following code:

{% if template == 'index' %}

  #shopify-section-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; 
  }

  #shopify-section-header .announcement-bar,
  #shopify-section-header .header {
    background-color: transparent !important;
  }

  #shopify-section-header .header, 
  #shopify-section-header .header__heading-link,
  #shopify-section-header .header__icon {
    color: #FFFFFF !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); 
  }

{% endif %}

Save it,

Thank You!

2 Likes
4

Thank you so much for your reply. I added the code but now i don’t have the transparent header anymore, i let you see :slight_smile:

Capture3.PNG
Capture3.PNG1231×779 119 KB

1 Like
5

Hey @Bipperly,

Could you please share your store url so that i can take a look into it and provide you with the Solution code.

Thanks

1 Like
6

Hi ! https://bipperly.com/
The websensepro code is pretty good ! but just wondering if its possible to have the transparent header and still have the annoucement bar at the very top like on my website right now :slight_smile:

1 Like
8

You can add this code to theme.liquid file, after <head> and save file

{% if template == 'index' %}
<style>
  body .section-header sticky-header {  background: transparent; }
  #MainContent { margin-top: -85px; }
  @media (max-width: 749px) {
    body #MainContent { margin-top: -67px; }
  }
</style>
{% endif %}

Best regards,
Dan from Ryviu: Product Reviews App

1 Like