Re: Help with moving header icons to right (Dawn theme)

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
6736 1820 2202

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 5 (5)

pierrewebdev
Shopify Partner
45 1 11

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)

I just launched a community for Shopify Developers and anyone looking to learn Shopify Development. If you're interested in becoming a Shopify Developer or leveling up your skills, join the community.
https://www.skool.com/shopify-dev-hub-5821

Moeed
Shopify Partner
6736 1820 2202

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


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
6736 1820 2202

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 Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


azamgill
Shopify Partner
325 47 82

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