Hide Pagination Buttons without affecting Announcement bar text

lovewithpride
Visitor
1 0 0

Hi! 

 

I was able to successfully hide the pagination buttons on my slideshows by changing this code, in the component-slider.css file: 

 

 

.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}

 

 

to this:

 

 

.slider-buttons {
display: none;
align-items: center;
justify-content: center;
}

 

The issue with this, is it also seems to affect my announcement bar. When I have this adjustment saved so that display: none, the announcement bar text disappears.

 

I tried using the :not exclusion like so:

 

.slider-buttons:not(#Slider-sections--17467493187828__announcement_bar_NYTEJm) {
display: none;
align-items: center;
justify-content: center;
}

 

I also tried a couple different variations of that :not exclusion, such as using the announcement bar class (.announcement-bar) instead of the ID, but that didn't work.

 

If anyone has any ideas - I assume I might need to go into another file to fix this - please let me know! 

Also, I'm using the refresh theme.

Reply 1 (1)

Liam
Shopify Staff
2731 297 768

Hi - which theme are you using?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog