How can I remove arrows from the announcement bar?

Store Design
, , ,
1

I’m looking to remove the arrows from the announcement bar! Have tried lots of codes found here as well as targeting the sliders but nothing seems to be working.

url: https://afca7f-2.myshopify.com/

2

Hi @blakelyhi

Please add this code to your theme.css or theme.css.liquid file in Online store > Themes > Edit code

.announcement-bar .fader { display: none !important; }

Screenshot_3.jpg
Screenshot_3.jpg640×288 9.67 KB

3

Hey Blake,

In the “custom CSS” options for your announcement bar, within the ‘customize theme’ settings:

custom css.png
custom css.png308×359 17.6 KB

Add the following coding:

.button.slider-nav-button.slider-nav-button-prev, .button.slider-nav-button.slider-nav-button-next {display: none;}

Let me know if this works or not! :slightly_smiling_face:

Cheers,

Stephen

4

Add the following CSS to the end of theme.css**:**

.announcement-bar button.slider-nav-button.slider-nav-button-prev,
.announcement-bar button.slider-nav-button.slider-nav-button-next {
  display: none;
}

If the above doesn’t work, try this:

.announcement-bar button.slider-nav-button.slider-nav-button-prev,
.announcement-bar button.slider-nav-button.slider-nav-button-next {
  display: none !important;
}
5

Hi @blakelyhi

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css

.announcement-bar .fader { 
  display: none !important; 
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly