Solved

Help with moving header icons to right (Dawn theme)

Femmi
Excursionist
30 0 1

Hi Community!

I am looking for some help with moving the icons (Search, Account & Cart) to right most corner. This should be fairly easy so i can have more room for the menu, but that doesn't seem to be the case. 

 

I have attached a screenshot of what i am trying to accomplish.

I hope someone can please help me with this?

Untitled design (1).jpg

 

Gracias!

Femmi

Accepted Solution (1)

Moeed
Shopify Partner
3522 887 1103

This is an accepted solution.

Hey @Femmi 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.header__icons {
    left: 200px !important;
    position: relative !important;
}
}
</style>

RESULT:

Moeed_0-1699342659489.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

View solution in original post

Replies 5 (5)

pierrewebdev
Shopify Partner
32 2 7

Hey can you send me a link to your store so I can take a closer look.
This can probably be fixed with some custom CSS (code to style the header)

Check out my Shopify Content on the Code That Converts YouTube Channel
If you need Shopify Help send me an email at patrick@codethatconverts.com

Moeed
Shopify Partner
3522 887 1103

This is an accepted solution.

Hey @Femmi 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.header__icons {
    left: 200px !important;
    position: relative !important;
}
}
</style>

RESULT:

Moeed_0-1699342659489.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
Femmi
Excursionist
30 0 1

Hi Moeed, That did the trick, Thank you!

 

I have another ask though..and hoping its a small change!

I would like to change the Bag icon for checkout to a Cart icon.

Untitled design (2).jpg

 

Is this icon somewhere i can change? For the life of me, i am not able to locate this and really appreciate your help!!

 

Thanks much!

Femmi

Moeed
Shopify Partner
3522 887 1103

Hey @Femmi 

 

Yes, it is possible and it requires custom liquid coding and is not only possible through CSS. If you're not familiar with coding then I suggest to hire a Shopify developer who can help you out.

 

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

 

Best Regards,

Moeed 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

azamgill
Shopify Partner
312 46 68

Hey @Femmi 

Try this css

<style>
@media screen and (min-width: 990px){
.header:not(.drawer-menu).page-width {
    padding-right: 0 !important;
}
}
</style>

 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify