How do I rearrange the header icons in dawn theme for mobile view keeping everything aligned

[Lodhas]

I am unable to rearrange the header icons in dawn theme for mobile view keeping everything aligned in a single line in the order menu drawer, search, logo, customer icon, cart. I did try to add the search icon right after the menu drawer but it hides the search icon from the desktop view and the icons are not in one line.

[devcoders]

Hello @Lodhas 
Welcome to the Shopify Community! Kindly share your store URL and password (if it is password-protected), so that I can review it and provide you with an accurate solution.

[devcoders · Accepted solution]

Hello @Lodhas 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media only screen and (max-width: 768px) {
.header {
position: relative;
}
.header__search {
position: absolute;
left: 18%;
top: 50%;
transform: translateY(-50%);
}
.header__heading {
margin-left: 10px; 
}
details[open] .header__search {
position: static!important;
top: auto;
transform: none;
}
.header__search:has(details[open]) {
position: static;
left: auto;
top: auto;
transform: none;
}
}