Archived topic
Account Icon order in the top menu
7 replies · Started by Kapil on August 24, 2021
I have used your following solution to create a new account icon on my website. However the icon is placed in the end on desktop and at the begining on the mobile. I want it to be placed in the middle between search and cart icons.
Hi there,
you can do this by creating 2 x Hook Elements:
1. For desktop
Add the following code:
<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>
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?
Hi there,
To clarify, are you aiming for this order of icons?
https://share.getcloudapp.com/04uxNdWQ
If yes, you can try this CSS:
@media (max-width:768px) {
a.account-link {
order: 2;
}
span.search-item {
order: 1;
}
.mobile-bar-items {
display: flex !important;
flex-direction: row;
}
}Hi Elvin
It solved some issue but one is still there:
On the Desktop the 'Account' icon is the third one on the right side. And on the mobile it is in the middle. I would like the Account to be in the middle on both Desktop and mobile
Hi Kapil,
According to your current structure, it's not possible to move the account icon to the middle.
Can you try to add the account icon as a menu item?
The three icons are not a menu. These are automactically displayed.
I know the account icon on desktop is added using this hook inside_navigation_hook, can you try disable it and re-add it as a menu item?
If I add as a menu item how will it get displayed between search and cart icons
CSS will be needed.
