Need Help Aligning Custom Announcement Bar in Impact Theme

[Tijn2]

Hi there,

I’ve added a second announcement bar under the header in my Impact theme. The theme already has a built-in announcement bar above the header, which works perfectly. However, for the custom announcement bar I’ve added below the header, I’m encountering the following issue:

• The content (bullet points) aligns correctly with the header, but the background box doesn’t stretch to full width of the page.
• It seems like the Impact theme’s built-in width constraints are affecting the new bar, and I need to make the background span the entire viewport while keeping the content aligned with the header.

I’ve tried adjusting the padding and width using custom CSS, but I can’t seem to override the theme's settings properly without affecting other sections of the page.

Could anyone guide me on how to make the background of the custom announcement bar span full width while keeping the content aligned with the header?

Thanks in advance!

[Tijn2]

[Tijn2]

That would be perfect brother!

[Tijn2]

Let me know what you need in order to help me out. 

[Tijn2]

Sure you can connect with me on discord :
tijn_a
or telegram 
@DitIsTijn

[Made4uo-Ribe]

Hi @Tijn2 

Please, share your store URL. Thanks!

[Tijn2]

Hi there,

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

[Made4uo-Ribe]

Thanks for the info, try this one.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.section.section-blends.section-full:has(div#s .custom-announcement-bar-wrapper) {
     background-color: rgb(250, 255, 225);
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[devcoders]

Hello @Tijn2 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[Tijn2]

Hi Devcoders,

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

[Tijn2]

I hope you can help me with an issue I’m facing. I’ve set up a test store to troubleshoot the problem since my live store is currently active.

On the test store, I’ve created a product page where you can see the custom announcement bar that appears above the product image and content. The issue is that the bar does not span the full width of the page, and I’m struggling to fix this.

You can view the test store and the issue here:
https://teststoreffw.myshopify.com/products/test-123
Password: peesoh

Thank you so much in advance for your help!

Best regards,
Tijn

[devcoders]

Hello @Tijn2 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.css Add the provided code at the end of the file.

section#shopify-section-template--24779514675540__custom_liquid_Pdzct8 .section.section-blends.section-full {
padding-left: 0;
padding-right: 0;
padding-bottom: 15px;
}