How to adjust announcement bar by height

How to adjust announcement bar by height

Drews1k
Tourist
14 0 2

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?

Снимок экрана 2024-06-12 095451.png

Replies 11 (11)

Darshanp712
Shopify Partner
137 21 16

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

 

Thanks.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Drews1k
Tourist
14 0 2

Darshanp712
Shopify Partner
137 21 16

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 */
}

Screenshot from 2024-06-13 16-23-05.pngScreenshot from 2024-06-13 16-23-16.png

 

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.

Screenshot from 2024-06-13 16-26-14.png

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Darshanp712
Shopify Partner
137 21 16

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.

Screenshot from 2024-06-13 16-57-55.png

 

Feel free to reach out if you have any questions or need assistance.

Best Regards,

Darshan.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Drews1k
Tourist
14 0 2

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
Shopify Partner
137 21 16

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Drews1k
Tourist
14 0 2

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
Shopify Partner
137 21 16

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

Thanks.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Darshanp712
Shopify Partner
137 21 16

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;
}

 

Screenshot from 2024-06-13 17-22-27.png

Step 2 Make a change in color scheme with a transparent bg color.

Screenshot from 2024-06-13 17-22-41.png

Step 3 Make changes in header CSS with margin-top

 

.header-wrapper .header {
    margin-top: 35px;
}

 

Screenshot from 2024-06-13 17-22-59.png

 

See the final output in the screenshot below.

Darshanp712_0-1718280010001.png

 

 

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.
Drews1k
Tourist
14 0 2

I did step by step and now everything is white)

Darshanp712
Shopify Partner
137 21 16

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.