Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Overlay Announcement Bar on Dawn Theme

Solved

Overlay Announcement Bar on Dawn Theme

br4t
New Member
8 0 0

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.

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
9079 2169 2678

This is an 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:

Made4uoRibe_0-1729898427717.png

 

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

 

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Made4uo-Ribe
Shopify Partner
9079 2169 2678

This is an 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.  
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9079 2169 2678

Hi @br4t 

 

Can you provide your website? To better assist you

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
br4t
New Member
8 0 0

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

Made4uo-Ribe
Shopify Partner
9079 2169 2678

This is an 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:

Made4uoRibe_0-1729898427717.png

 

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

 

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
br4t
New Member
8 0 0

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

Made4uo-Ribe
Shopify Partner
9079 2169 2678

This is an 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.  
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

richardcobain
Excursionist
40 0 4
 

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!