can anyone help me with the header icons?

[Unknowndev234]

can anyone help me with the header icons? my header icons on desktop are not properly aligned. I want to make my icons have queal hieght, gap and properly middle center aligned. And I want to move my icons bit right side on both devices. Thanks! 
store url: https://store1.ecomsmartify.shop/ 
store password: 4

[websensepro]

Hi @Unknowndev234 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__icons.header__icons--localization.header-localization {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.header__icon.header__truck svg {
    width: 30px !important;
    height: 30px !important;
}
.header__icon.header__truck {
     margin-left: 0px !important;
}
.header__icon .icon {
    height: 28px !important;
    width: 28px !important;
}
.header__whatsapp svg {
    width: 27px !important;
    height: 27px !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[topnewyork]

Hi @Unknowndev234 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.header__icon, .header__icon--cart .icon {
    fill: black;
}
.header-wishlist-icon svg {
    fill: black;
}
.header__icon .icon {
    fill: black;
    width: 28px!important;
    height: 28px !important;
}
</style>

 If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Unknowndev234]

Thanks for your time. And providing me the solution. I want to move me header icons bit right side. Thanks again!

[topnewyork · Accepted solution]

@Unknowndev234 Add this code also

<style>
@media (max-width: 768px){
.header__icons.header__icons--localization.header-localization {
    margin-right: -14px !important;
}
}
@media (min-width: 769px){
  .header__icons.header__icons--localization.header-localization {
    margin-right: -50px !important;
}
}
</style>

[Unknowndev234]

Hi Thank you soo much now my icons are perfect. Thanks ! can I make my logo aligne like this website on mobile version https://beechtree.pk/ 

Thanks Again!

[topnewyork]

@Unknowndev234  Which logo needs to be aligned? And on which website? I think the Beechtree logo looks good. Which website's logo are you talking about?

[Unknowndev234]

My website logo https://store1.ecomsmartify.shop/ on mobile version alinged and size, style like the https://beechtree.pk/ wesbite. 

[topnewyork]

@Unknowndev234 
There are many nav links, like home, new arrival etc, so I tried myy best to adjust the logo but not same like beechtree.. Hope you will like it 

<style>
@media (min-width: 769px){
  .header__heading-logo {
    transform: scale(1.4);
}
.header--middle-left .header__heading-link, .header--top-left .header__heading-link {
        margin-left: -1.75rem;
    }
.list-menu--inline {
    margin-right: -32px;
}
}
</style>

 Try this one then let me know 
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[Unknowndev234]

Thankyou soo much ! @topnewyork I want logo on on moble to align left side like the beechtree currunctly my website logo on mobile is in center. Thanks Again

[brisk_code]

Hi, this is Fazil Nusrat from Brisk Code.
I checked your store, and it seems the only issue is with your WhatsApp icon. I wrote some code that you can replace in the appropriate place. If you're not sure how to do it, I can guide you through it via reply, or I'm ready to help you through AnyDesk at no cost.
Thanks!

.header__icons .header__whatsapp svg{
   width: 22px;
   margin-bottom: 1px;
}

[Unknowndev234]

Sure Thanks for your time. And providing me the solution. I want to move me header icons bit right side. Thanks again!

[brisk_code]

Hi, thank you for your reply. I noticed that your logo has some additional issues. The best solution would be to decrease the space between the menus and the icons. I'll work on finding a solution to ensure everything is properly aligned.

Also If my reply is helpful, kindly click like and mark it as an accepted solution.