How to adjust announcement bar by height

[Drews1k]

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?

[Darshanp712]

Hello @Drews1k, Please share your live store URL or share the preview URL of the store.

Thanks.

[Drews1k]

Hey) https://f35b35-f9.myshopify.com/
Pass- 2633

[Darshanp712]

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

[Darshanp712]

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.

[Drews1k]

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?

[Darshanp712]

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.

[Drews1k]

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;

[Darshanp712]

@Drews1k  Please check these steps, do those changes only.

Thanks.

[Darshanp712]

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]

I did step by step and now everything is white)

[Darshanp712]

You need to check all the color schemes. Please check all the color schemes in your theme settings.