Archived topic
icon "my account" menu bar
8 replies · Started by José Ojeda on September 4, 2020
Hi, is there a way to create a "my account" icon on the main menu bar. that is the same as the shopping cart icon? thank you.
![]()
![]()
Hi there,
you can do this by creating 2 x Hook Elements:
1. For desktop
Add the following code:
<a class="account-link" href="add_url_to_your_account_page">
<svg aria-hidden="true" class="svg-accont-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
</svg>
</a>
Make sure you update this part of the code with your account page URL:
href="add_url_to_your_account_page"
The select the Hook: inside_navigation_hook
Set the Display Rules to Entire Site.
2. Now create a new hook exactly the same as above. But use the Hook: inside_mobile_menu_bar
Once that is done we will need to add some CSS.
Can you provide access to the site so i can provide that CSS?
Thank you very much for your quick response. I have the site open so you can help me with the CSS. If you could use the Google Chrome browser console to generate the CSS code it would be great. I thank you again.
This CSS for desktop:
.inside-navigation {
display: flex;
justify-content: center;
align-items: center;
}
.account-link {
padding: 0 10px;
order: 20;
}
.account-link svg {
width: 15px;
}
Can you enable the Mobile Header in Customizer > Layout > Header then i can look at that CSS
Thanks David for your great help. Have a great day. Everything turned out very well.
Glad to hear that !
Hello Team,
I have followed the exact guide to replace my account with an icon. I did this using the niche store demo side.
However, I face two little issues and would need your help if possible:
1/ It does not show on mobile.
2/ I'd like if its not too complicated to have my account in between the search icon and the cart.
3/ If you see my icon, it not really aligned with the other.
Thanks a lot for your help.
I have disabled my cache this time ;-)
Any chance you can open a new topic and link us to the page in question?
Thanks :)
Hello adriendemonta,
Have you opened a new topic about your question?
Maybe I have a solution for your No.1 and No.3 points of your question and as Leo said, if there is a new topic I will submit my proposal there.
Best regards,
georgios