Solved

How to move icons closer together in the header section (Dawn Theme)

MMast
Explorer
115 0 8

Thanks in advance!

I am looking to move the icons (Search, Cart) in my header closer together on the mobile version. How do i go about doing so? and is it possible to move one icon at a time?

How my mobile version site looks:

IMG_0373.jpg

How I want it to look:

IMG_0372.jpg

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1821 514 389

This is an accepted solution.

Hey @MMast,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .header__icon:not(.header__icon--summary), .header__icon span {
        justify-content: flex-end !important;
        margin-left: 5px !important;
    }
    
    .header__icon, .header__icon--cart .icon {
        height: max-content !important;
        width: max-content !important;
    }
    
    .header__icon[aria-controls="menu-drawer"] {
        height: 44px !important;
        width: 44px !important;
    }
    
    .header__icon[aria-controls="menu-drawer"] span {
        justify-content: center !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710008771895.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 15 (15)

techlyser_web
Shopify Partner
1423 268 282

Hello @MMast 

can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MMast
Explorer
115 0 8
MMast
Explorer
115 0 8
MMast
Explorer
115 0 8
techlyser_web
Shopify Partner
1423 268 282

password?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MMast
Explorer
115 0 8

dc       

techlyser_web
Shopify Partner
1423 268 282

 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 825px){
    summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
          padding-left: 18px !important;
    }
     h1.header__heading {
          display: none !important;
     }
}
</style>

techlyser_web_0-1710007711259.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MMast
Explorer
115 0 8

Can you give an example of what you mean when you say "before </body>" please.

ThePrimeWeb
Shopify Partner
1821 514 389

This is an accepted solution.

Hey @MMast,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .header__icon:not(.header__icon--summary), .header__icon span {
        justify-content: flex-end !important;
        margin-left: 5px !important;
    }
    
    .header__icon, .header__icon--cart .icon {
        height: max-content !important;
        width: max-content !important;
    }
    
    .header__icon[aria-controls="menu-drawer"] {
        height: 44px !important;
        width: 44px !important;
    }
    
    .header__icon[aria-controls="menu-drawer"] span {
        justify-content: center !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710008771895.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MMast
Explorer
115 0 8

That didn't work 😕

ThePrimeWeb
Shopify Partner
1821 514 389

I don't see the code pasted in the website. Where did you do it?

 

Also, are you customizing another theme because the link sends me to the live theme, not the one you are customizing (if it's a draft)

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MMast
Explorer
115 0 8

It works! Thank you, sorry I wasn't looking at the proper area. Also, how would I adjust the positioning manually with this code? Right and left, up and down?

MMast
Explorer
115 0 8

For anyone wondering;

Screenshot 2024-03-09 135734.png

ThePrimeWeb
Shopify Partner
1821 514 389

Up an down is not really an option in this code itself, but you can move left and right by reducing or increasing the 5px value. 

ThePrimeWeb_0-1710010579977.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MMast
Explorer
115 0 8

Thank you!