Cart Icon isn't inline with other SVG Icons

Store Design
1

Hello! I am trying to lower the cart icon on my website header. The website is: www.buywoes.com

I tried using this, but every time I lower the cart, the other icons move with it:

.site-header__cart {
bottom: -5px !important;

Thanks in advance for the help!

2

@WoesandNCG

sorry for that issue can you please try this code

.site-header__cart svg {
    vertical-align: -3px;
}
3

@WoesandNCG

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.site-header__cart svg {
    vertical-align: -1px;
}

Hope this helps.

Thanks!

4

Thank you, but this one still moves the other icons as well.

5

@KetanKumar @dmwwebartisan

Okay, for some reason, -3px seems to make it almost perfect, but if I increase the number, it starts to move them all down.

6

@WoesandNCG

CSS code applies only on cart icon but as these svg icons in same container so if we change one icons position then other icons will go up and down if it exceeds the limit.

Hope you understand. You can use -3 if it looks perfect.

7

Is there no way to move up the svg’s then? Even at -3px, the difference is still distractingly noticeable.

Or could we make the container taller?

8

@WoesandNCG

Please remove the old code and add this new code.

a[href="/cart"].site-header__cart {
    margin-top: 2px !important;
}

I double check the code and found that the classes are same of other icons too therefore we have this problem.

Try the above code let me know if that works.

9

It worked!

So does:

[href="/cart"]

refer specifically to the cart icon?

Thank you so much for the help with this!

10

@WoesandNCG

Yes, I had to do this because cart class applied on other links as well.

Happy to hear that it worked for you.

Best luck!!