Overlay Announcement Bar on Dawn Theme

Store Design
, , , ,
1

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.

2

Hi @br4t

Can you provide your website? To better assist you

3

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

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!

5

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
Made4uoRibe_0-1729898427717.png1883×574 267 KB

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

6

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

7

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 tag and paste the code below before the tag.
{% if template.name == 'index' %}

{% 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!