Re: 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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025