How to move icons closer together in the header section (Dawn Theme)
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:
How I want it to look:
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.
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as 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.
For anyone wondering;
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.
Community Blog Articles
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025