Code help: Adding buttons to the collection header

Solved
pearlerwork
Excursionist
20 0 5

I'm trying to add some buttons to the collection header, but I've hit a wall! Any help would be greatly appreciated. I just can't seem to get them centred. 

My code ↓

<span class="nav-gif-wrapper"> <a href="/collections/lingerie-sets"> <button id="collBtn" class="btn">Sets</button> <img src="https://media4.giphy.com/media/20ECEUpCJB7We3US38/giphy.gif?cid=ecf05e475v9n74ppd1rcyyiz98xwd6b6ywg4t4vuwj37omoy&amp;rid=giphy.gif&amp;ct=s" style="top: -35px; left: 10%;"> </a> </span> &nbsp;&nbsp; <span class="nav-gif-wrapper"> <a href="/collections/corsets"> <button id="collBtn" class="btn">Corsets</button> <img src="https://media4.giphy.com/media/20ECEUpCJB7We3US38/giphy.gif?cid=ecf05e475v9n74ppd1rcyyiz98xwd6b6ywg4t4vuwj37omoy&amp;rid=giphy.gif&amp;ct=s" style="top: -35px; left: 30%;"> </a> </span> &nbsp;&nbsp; <span class="nav-gif-wrapper"> <a href="/collections/bra"> <button id="collBtn" class="btn">Bras</button> <img src="https://media4.giphy.com/media/20ECEUpCJB7We3US38/giphy.gif?cid=ecf05e475v9n74ppd1rcyyiz98xwd6b6ywg4t4vuwj37omoy&amp;rid=giphy.gif&amp;ct=s" style="top: -35px; left: 50%;"> </a> </span> &nbsp;&nbsp; <span class="nav-gif-wrapper"> <a href="/collections/panty"> <button id="collBtn" class="btn">Panties</button> <img src="https://media4.giphy.com/media/20ECEUpCJB7We3US38/giphy.gif?cid=ecf05e475v9n74ppd1rcyyiz98xwd6b6ywg4t4vuwj37omoy&amp;rid=giphy.gif&amp;ct=s" style="top: -35px; left: 70%;"> </a> </span> &nbsp;&nbsp; <span class="nav-gif-wrapper"> <a href="/collections/clothing"> <button id="collBtn" class="btn">Clothing</button> <img src="https://media4.giphy.com/media/20ECEUpCJB7We3US38/giphy.gif?cid=ecf05e475v9n74ppd1rcyyiz98xwd6b6ywg4t4vuwj37omoy&amp;rid=giphy.gif&amp;ct=s" style="top: -35px; left: 85%;"> </a> </span>

 

https://michelleforbadgirls.com/collections/shop Pass: pearler

 

Screen Shot 2021-06-14 at 11.19.07 am.png

0 Likes
Michael_Pink
Navigator
296 51 65

This is an accepted solution.

HI @pearlerwork 

You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

#shopify-section-collection-header .section-header__description {
display: flex;
justify-content: center;

}

 

My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageFly PageBuilder App.
shopify.expert.team@gmail.com
0 Likes
pearlerwork
Excursionist
20 0 5

That worked nicely, big thanks!

0 Likes