Reposition search box On Mobile (Dawn Theme)

Store Design
, , , , ,
1

Store url: onlinebeautyessentials.com

Just need to center the search box that opens on mobile and move it up so it opens directly under the header.

Like this..

Loz86_0-1699479973522.png
Loz86_0-1699479973522.png394×188 12.5 KB

2

Hi @Loz86 , we will change some css code to do that go to base.css and search for this piece of code :

@media screen and (max-width: 989px) {
details-modal.header__search {
    position: absolute;
    left: 80px;
}
details[open]>.search-modal {
    top: 90px;
    width: calc(100vw - 55px);
    margin: 0px auto;
    left: -50px;
}
}

you will need to change two properties the top and width like this:

details[open]>.search-modal {
top: 5.5rem;
width: 100vw;
margin: 0px auto;
left: -50px;
}
3

Thanks Abdosamer,

Just bought you a coffee :+1:

4

Thanks, feel free to contact me anytime if you need help.