Header Builder – Adjustment of icons

Dear,

In the header, I’m trying to display the account icon in a similar way to the cart icon. However, the header builder has some limitations and does not provide such kind of options although on your demo store you have an example like that.

I managed to increase the size of the account icon, but i’m unable to add the space + vertical lign between the text & icon. How can I add it? See attachments

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

I got your point that you want to display that vertical line after my account icon as like the cart icon.

As in the header builder account element does not contain that style as like the cart icon.
But you can try the below CSS code in global custom CSS area under theme settings >> Custom CSS:

.my-account-with-icon{
border-right: 1px solid rgba(0,0,0,.1);
}

Result: https://jmp.sh/YF9gU2r

OR

.my-account-with-icon a .wd-tools-text{
    padding-left: 10px;
    border-left: 2px solid black;
}

Result: https://jmp.sh/M5sfDPZ

Best Regards.

I tried both on my header but they aren’t showing the same. Link below.

Hello,

I used the below CSS code in your global custom CSS area under theme settings >> custom CSS and it works just fine:

.my-account-with-icon{
    border-right: 2px solid grey;
}

Result: https://jmp.sh/oTNXwdq

For the divider after the account icon. I used the below CSS code in your global custom CSS area under theme settings >> custom CSS and it also works just fine:

.my-account-with-icon a .wd-tools-text{
    padding-left: 10px;
    border-left: 2px solid red;
}

Result: https://jmp.sh/aIszwPg

You can change the color name according to you from the above CSS code.

Best Regards.

Dear,

Thanks for the help, I adjusted a little more but still not fully 100% same, especially with the height of the line. How can I adjust that?

I moved the code in “CSS Desktop”

THanks

Attachments:

You must be logged in to view attached files.

Most Welcome,

Actually that was the border line. So to increase the height we must have to increase the height of the box which contains the name after the my account icon and also the text moves little upward by increasing the height.

If you are ok with it then let me know so I will provide CSS code accordingly.

Best Regards.

I found it thanks to your explanation :

line-height: 20 px

thanks!

Most Welcome!!!..

Well, gevcen!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts