How can I reposition the search icon next to account icon on Dawn theme?

[NaomiNN]

Hello,

how can I move the search icon next to account icon on computer only ?

i am using dawn theme.

Shop url :https://prettyprettyplease.fr

password: Naomi

[Artzen_tech]

Hello @NaomiNN

Its Artzen Technologies! We will be happy to help you today.

Go to edit code

Add (search_hide) Class in your (header.liquid) file same as screenshot

Add this CSS in your css file

@media screen and (min-width: 768px) {
.header.header--top-center details-modal.header__search {
    display: none;
}
.header.header--top-center details-modal.header__search.search_hide {
    display: inline-flex;
}
}

Let me know if need further assistance
Regards,
Artzen Technologies

[NaomiNN]

Hello, thank you for you reply.

I tried the code, the search icon disappeared, do you have another code ?

[Artzen_tech]

both CSS written under the media query like this:

@media screen and (min-width: 768px) {
.header.header--top-center details-modal.header__search {
    display: none;
}
.header.header--top-center details-modal.header__search.search_hide {
    display: inline-flex;
}
}

[NaomiNN]

Hello, it’s not working.

I added the code here as you said

[Artzen_tech]

Hi @NaomiNN

You are applying the class at wrong place, please wrie the class at the correct place as I mentioned in the above Screenshot.
Do check the Screenshot properly again. I asked you to write the code at line number 625. And you added somewhere else, then how will it work?
The above code is 2 times in the code file. Please thoroughly check and apply the recommended solution at correct place.

[NaomiNN]

It worked, thank you for your help !

[Artzen_tech]

Glad the solution helped. Feel free to ask again

[NaomiNN]

I have another question, how can I change the arrow in the mobile menu to this symbole >

it look like this

and I want it to look like that

[Artzen_tech]

hello @NaomiNN

Its Artzen Technologies! We will be happy to help you today.

Apply this CSS in your CSS file

.menu-drawer__menu-item svg.icon-arrow {
    display: none;
}
.js summary.menu-drawer__menu-item svg.icon-caret {
    display: block;
    transform: rotate(272deg);
    height: 8px;
}

Let me know if need further assistance
Regards,
Artzen Technologies

[NaomiNN]

I added the code at the bottom of base CSS file and the arrow disappeared but they weren’t replace by the new icon.