Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
This is an accepted solution.
Yes, follow this instruction below.
{% 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!
Hi @br4t
Can you provide your website? To better assist you
Here is the link to my new website. It is currently password protected and the password is piecku
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:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Is there a way to make it an overlay just on the homepage and be fully opaque on product pages?
This is an accepted solution.
Yes, follow this instruction below.
{% 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!
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:
This will set the background color to black with 50% transparency while keeping your white text visible!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024