Announcement bar disappeared all of a sudden

[massmonster]

Hey guys

all of a sudden my announcement bar is not showing anything dawn 11.0
no idea why or how
www.sundaymass.store
Need help!
thank you

[Dan-From-Ryviu]

Hi @massmonster 

You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.utility-bar .slider--everywhere {
overflow-x: unset;
}

[theycallmemakka]

Hi @massmonster 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.announcement-bar__announcement *{
    visibility: visible!important;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[massmonster]

non of these solutions have worked. Need to find out why this is happening in the first place, would rather find out why instead of adding more code to the theme

[theycallmemakka]

Hi @massmonster ,

This is happning because the text inside the slider is hidden. We should be able to show this by adding this custom CSS. 

Please add the code at the end of theme.liquid file, just above </body>

<style>
.slider__slide[aria-hidden=true] {
    visibility: visible!important;
}
</style>

[Dan-From-Ryviu]

The active announcement is always out of the slider container, and the slider container has overflow-x: hidden, which means it will hide content outside the container. Non-active set invisible 

[WizzCommerce_Co]

Hi @massmonster , thank you for posting here!

You can follow my instruction below:

Please add this CSS code to the bottom of your base.css file and check:

.announcement-bar-slider.slider-buttons{display:flex !important;}

If my answer is working for your store, please let me know by accepting Solution and giving Like !!!

[Sweans]

HI @massmonster ,

The problem is related to the slider attribute, which is why the slider isn't visible. This could be caused by the elements used in the header announcement. Please follow the steps below to review the announcement. We have also attached a screenshot for reference.

1. In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the "Customize" button for the theme you wish to modify. If you want to make changes directly to the live theme, select the first theme. Refer to the screenshot for guidance.

2. Click on an announcement shown in the header section. This will give you the option to edit the announcement and check if there is any value set to hide the announcement bar. Please refer to the screenshot.

If this doesn't solve the issue, you need to examine the code. If you have trouble troubleshooting the issue, please use the following CSS code to make the announcement visible:

.announcement-bar-slider.slider-buttons .slideshow__slide {
visibility: visible !important;
}

 
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans