can anyone help me with the header icons?

Store Design
, ,
1

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

2

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:

websensepro_0-1737099949493.png
websensepro_0-1737099949493.png1361×595 826 KB

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! :rocket: (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!

3

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

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

4

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;
}
5

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

6

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

7

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.

8

@Unknowndev234 Add this code also
9

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!

10

@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?

11

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

12

@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

topnewyork_0-1737113298492.png

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

13

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