Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Hide Pagination Buttons without affecting Announcement bar text

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
Community Manager
3108 344 911

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