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! 

Hi @tuanphan sorry to bother you again but ive made some changes to my site and ideally would like the search bar and account icon to be further to the right on the mobile view (so it's more spaced out) is there a way to do this? The website is www.thealchemiguide.com and the password is Hello123, appreciate your help, thank you! 

On 6/5/2023 at 11:33 PM, Emilienev said:

Hi @tuanphan sorry to bother you again but ive made some changes to my site and ideally would like the search bar and account icon to be further to the right on the mobile view (so it's more spaced out) is there a way to do this? The website is www.thealchemiguide.com and the password is Hello123, appreciate your help, thank you! 

Hello123

password is incorrect

@tuanphan sorry it should work now i have double checked it! 🙂 

Add to bottom of CSS box

@media screen and (max-width:767px) {
.header-title-nav-wrapper {
    flex: 1 0 80px !important;
}
.header-actions.header-actions--right {
    left: -80px !important;
}
}

@tuanphan thank you so much!

@tuanphan Hello, im so sorry to bother you again but i was wondering whether you could help me integrate this cart icon on both my desktop header and mobile header? ideally id like the search, account and cart icon all to the right and the same size (maybe slightly smaller if thats possible?). On the mobile view there seems to be two carts which im not sure why. The password to my website is Hello123, thank you so much in advance! 

Don't remove any code in your current code. Add this under

.header-display-mobile .header-actions.header-actions--right .showOnMobile+.showOnDesktop .header-actions-action {
    display: none !important;
}
.header-actions.header-actions--right>div {
    left: 0 !important;
}