Hi. I would like to change the color of the announcement bar (only the announcement bar) on our site. Changing the color in the announcement bar section using the "Customize" theme button does nothing so I must have code that is overwriting that somewhere.
I have tried various ways to change the color in this code (theme.scss.liquid) but have had no luck.
.announcement-bar {
text-align: center;
position: relative;
z-index: $z-index-announcement-bar;
}
.announcement-bar--link {
display: block;
}
.announcement-bar__message {
display: block;
font-size: em(16);
font-weight: $font-weight-header;
padding: 10px $gutter-site-mobile;
@include media-query($medium-up) {
padding: 10px $gutter-site;
}
Any help would be very much appreciated.
Hi Matt,
You're in the right place to change the alert bar color for an out of the box Debut theme. In this case, another css style is taking priority.
A good trick to use to determine what css style is driving the output is to use developer tools in chrome (press Ctrl + Shift + I on the HTML element). Here's the relevant output in chrome:
Looks like there is a file called custom-style.css that is overriding the background color on line 156 and includes an !important directive to drive up the priority :
.announcement-bar {
background-color: #989898!important;
float: left;
width: 100%;
}
Delete or change this line and you are in business.
Community Blog Articles
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024