Hi guys, i have a problem with announcement bar, i made it transparent together with header section, but you can see i have green line on top of it, its my theme color, wasn’t like this before i made it transparent, any suggestion how to remove it so my image banner can cover all the way on top?
Topic summary
Issue: After making the announcement bar and header transparent, a thin green line appeared at the top; the banner image didn’t cover the top edge.
Findings: The announcement bar had height: 5px, exposing the theme’s green background from its assigned color scheme (gradient/color-scheme-1).
Proposed fixes (most recent):
- Announcement bar CSS: .shopify-section-group-header-group.announcement-bar-section { height: 40px; width: 100%; position: absolute; }.
- Header CSS: .header-wrapper .header { margin-top: 35px; }.
- Theme settings: Set the announcement bar’s color scheme background to transparent or assign a scheme with a transparent background.
Notes: Earlier suggestions included removing the 5px height, trying height: 100%, and ensuring position: absolute; the user briefly set height: 0px. Screenshots and CSS snippets were provided and are central to applying the fix.
Outcome: The first issue was resolved, but after following the final steps the user saw an all-white area. The helper advised reviewing and correcting all color schemes in theme settings.
Status: Ongoing. Next action is to adjust theme color schemes so the announcement bar remains transparent without forcing a white background.
Hello @Drews1k , Please share your live store URL or share the preview URL of the store.
Thanks.
Hey) https://f35b35-f9.myshopify.com/
Pass- 2633
Hello @Drews1k , I see that issue. It caused due to height is set to is 5px. Please make changes to them. See the screenshots below and change the CSS.
.shopify-section-group-header-group.announcement-bar-section {
height: 5px; /* remove or comment this old css */
height: 100%; /* add new css */
}
This is in green color because it comes from the color scheme that you assigned to it. See the screenshot below. The gradient and color-scheme-1 is taking bg color as a green.
to make the background transparent you have to make changes in that announcement bar scheme color or assign a new scheme to that.
Feel free to reach out if you have any questions or need assistance.
Best regards,
Darshan
Hello @Drews1k , Please update this CSS in that CSS.
.shopify-section-group-header-group.announcement-bar-section {
position: absolute;
width: 100%;
}
Add this CSS for the header also.
.header-wrapper .header {
margin-top: 35px;
}
Please check and see the screenshot below.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
Darshan.
That works for 1st issue. But i can not edit color theme to transparent in simple editing menu, i think i need new css for that?
Hey @Drews1k , Try new CSS for that transparent color scheme bg of the announcement bar.
If I managed to help you then, don’t forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.
Done!
.shopify-section-group-header-group.announcement-bar-section {
height: 5px; /* remove or comment this old css /
height: 100%; / add new css */
}
I just changed it to height: 0px;
Hello @Drews1k , Just follow the steps below and only make changes to them.
Step 1 Make changes in your announcement bar CSS only.
.shopify-section-group-header-group.announcement-bar-section {
height: 40px;
width: 100%;
position: absolute;
}
Step 2 Make a change in color scheme with a transparent bg color.
Step 3 Make changes in header CSS with margin-top
.header-wrapper .header {
margin-top: 35px;
}
See the final output in the screenshot below.
If I managed to help you then, don’t forget to Like it and Mark it as a Solution!
Feel free to reach out if you have any questions or need assistance.
Best Regards,
Darshan.
@Drews1k Please check these steps, do those changes only.
Thanks.
I did step by step and now everything is white)
You need to check all the color schemes. Please check all the color schemes in your theme settings.