Aligning Header Icons

[_apse_]

Hi all,

I cannot align the Wishlist Plus icon with the search and cart icons. Here's an image for reference:

Store URL: https://apse.us

Any help would be appreciated!

Thanks,

apse

[BSSCommerce-HDL · Accepted solution]

Hi @_apse_, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a.swym-wishlist {
    margin-left: 10px !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

Hi @_apse_ ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.min.css. And add this code snippet to the end of the file.

.hidden.lg\:block.whitespace-nowrap.ml-4 {
    padding-top: 5px !important;
}
a.swym-wishlist {
    padding-left: 10px !important;
}

In this step, you make this icon was aligned.

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[BSSCommerce-HDL · Accepted solution]

Hi @_apse_, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
a.swym-wishlist {
    margin-left: 10px !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

Hi @_apse_ ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.min.css. And add this code snippet to the end of the file.

.hidden.lg\:block.whitespace-nowrap.ml-4 {
    padding-top: 5px !important;
}
a.swym-wishlist {
    padding-left: 10px !important;
}

In this step, you make this icon was aligned.

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Rahul_dhiman · Accepted solution]

Hello @_apse_ 
Go to online store ---------> themes --------------> actions ------> edit code------->theme.min.css
at the end of the file and save.

a.swym-wishlist {
margin-left: 10px;
}
.hidden.lg\:block.whitespace-nowrap.ml-4 {
padding-top: 5px;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[_apse_]

THANK YOU!

[Rahul_dhiman]

Happy to help you...!!!