Change clickable range of icons in the header

Store Design
, , , , , ,
1

Hi guys,

I’ve been stuck on this for a while and would really appreciate any help!

Does anybody know how I can reduce the clickable range of the icons in the header without actually moving the positions of the icons. I would like there to be space between the icons so that cursor switches back to the ‘non-clickable’ cursor between the icons. I’d like to make it more obvious to the user which icon they’re selecting and not by doing an enlarge on hover. Website: seraneeva.com I’d really appreciate any help!

2

Hi @flammagreg ,

Can you try adding the CSS that i have written and let me know if this works.

Follow these Steps:

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

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

3

It didn’t work

4

can you please provide a screnshot of the theme editor showing where you have added the block of code?

5

It was at the bottom of custom.css

6

if you are adding at the bottom of custom.css, you should add only CSS part. Can you try adding this

.top-links--icon-links {
    gap: 8px;
}
.standalone-icon--wrapper:not(.icon-no-padding) {
    min-width: 35px;
    min-height: 35px;
    padding: 8px !important;
}