Moving Search Icon & Account Icon

Hello,

I was wondering if anyone could help me. I would like to move my search icon on my navigation to the opposite side (right side) next to the account icon. Is there a way to do this? 

Also, is it possible to get both of these icons in the navigation on mobile view to the right of the logo? i have attached pictures with where i would like these to be. 

Thank you in advance for any help! 

Hi,

Can you share link to your site? We can check easier

Hey @tuanphan sure its Hello123 🙂 

On 2/10/2023 at 6:00 PM, Emilienev said:

Hey @tuanphan sure its Hello123 🙂 

Hi,

Site url, not password

@tuanphansorry! its www.thealchemiguide.com

On 2/13/2023 at 2:33 AM, Emilienev said:

@tuanphansorry! its www.thealchemiguide.com

Add this to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('header#header .search-icon').insertBefore('.header-actions.header-actions--right>.user-accounts-link');
	});
</script>
<style>
  .header-layout-branding-center-nav-center .header-actions--right>div:first-child {
    display: none;
}
</style>

@tuanphan thank you so much that worked perfectly on the desktop! Is there a way to get the search icon and the members icon into my navigation header on mobile view next to the site title? At the moment i cant see the search icon and the members icon is positioned like a navigation title. 

Thanks again for your help! 🙂 

On 2/16/2023 at 5:00 AM, Emilienev said:

@tuanphan thank you so much that worked perfectly on the desktop! Is there a way to get the search icon and the members icon into my navigation header on mobile view next to the site title? At the moment i cant see the search icon and the members icon is positioned like a navigation title. 

 

Thanks again for your help! 🙂 

Current Member Icon is in overlay Menu. You want to move it outside + add a search icon to right of header. Is this right?

@tuanphanYes please, so the search icon and member icon are together to the right of the header if possible 🙂 Thank you! 

On 2/21/2023 at 4:38 PM, Emilienev said:

@tuanphanYes please, so the search icon and member icon are together to the right of the header if possible 🙂 Thank you! 

Add this code under

<style>
  @media screen and (max-width:991px) {
  .header-actions.header-actions--right, .header-actions.header-actions--right>div {
    display: flex !important;
    position: relative;
    left: -40px;
}
  }
</style>

@tuanphanthank you! It has worked but now there are two search icons and the members icon is still in the overlay menu...I added it underneath the previous piece of code have i added it in the wrong place? Thanks again 🙂 

On 2/27/2023 at 5:14 PM, Emilienev said:

@tuanphanthank you! It has worked but now there are two search icons and the members icon is still in the overlay menu...I added it underneath the previous piece of code have i added it in the wrong place? Thanks again 🙂 

Add this under to hide them

<style>
  .header-actions.header-actions--right>div:first-child {
    display: none !important;
}
  .user-accounts-link.header-menu-nav-item.header-nav-item--collection.customerAccountLoginMobile.loaded {
    display: none;
}
</style>

@tuanphan Ah that worked perfectly thank you so much for your help! 

Hey @tuanphan so sorry but i was wondering if you could help me (again!). I would ideally like the search icon to be next to account icon on my desktop page. It's perfect on mobile view, just desktop where they are slightly too far apart, would you please be able to help me with this? 🙂 

Hello123

https://www.thealchemiguide.com/

password is incorrect

sorry @tuanphan the password Hello123 should work now! 

On 5/2/2023 at 9:41 PM, Emilienev said:

sorry @tuanphan the password Hello123 should work now! 

Add to Design > Custom CSS

.header-actions--right .customerAccountLoginDesktop {
    margin-left: 0px;
}

@tuanphanThat worked perfectly thank you so much!