Overlay Announcement Bar on Dawn Theme

[br4t]

I am interested in making my announcement bar an overlay, maybe 50% transparent? I have found a ton of codes for a fully transparent background, but if anyone has any knowledge of how to make it only a percent transparent it would be greatly appreciated. I am using the dawn theme and my announcement bar is black with white text, if that is necessary information for the code.

[Made4uo-Ribe · Accepted solution]

Hi @br4t,

Thank you for providing your website. Please follow the instructions below

1. From the Admin page, go to Online Store > Themes
2. Select the theme you want to edit, click the three dots to edit code
3. Under the Asset folder, open the base.css
4. Then place the code below at the very bottom of the file and SAVE

.announcement-bar-section .utility-bar.gradient {
    position: absolute;
    z-index: 122;
    width: 100%;
    height: 37px;
    background: rgba(0, 0, 0, 0.5);
}

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!

[Made4uo-Ribe]

Hi @br4t 

Can you provide your website? To better assist you

[br4t]

Here is the link to my new website. It is currently password protected and the password is piecku

[Made4uo-Ribe · Accepted solution]

Hi @br4t,

Thank you for providing your website. Please follow the instructions below

1. From the Admin page, go to Online Store > Themes
2. Select the theme you want to edit, click the three dots to edit code
3. Under the Asset folder, open the base.css
4. Then place the code below at the very bottom of the file and SAVE

.announcement-bar-section .utility-bar.gradient {
    position: absolute;
    z-index: 122;
    width: 100%;
    height: 37px;
    background: rgba(0, 0, 0, 0.5);
}

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!

[br4t]

Is there a way to make it an overlay just on the homepage and be fully opaque on product pages?

[Made4uo-Ribe · Accepted solution]

Yes, follow this instruction below.

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 "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
.announcement-bar-section .utility-bar.gradient {
    position: absolute;
    z-index: 122;
    width: 100%;
    height: 37px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
{% endif %}

And Save. 

This will only show on the homepage and not in other page. 

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

1.  

[richardcobain]

To make your announcement bar in the Dawn theme 50% transparent, you can add custom CSS in the theme editor. Try adding the following code to your Online Store > Themes > Customize > Theme settings > Custom CSS section:

css

Copy code

#shopify-section-announcement-bar { background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value for transparency */ }

This will set the background color to black with 50% transparency while keeping your white text visible!