Move search icon below header mobile Dawn theme

Store Design
, , ,
1

On the dawn Theme I have added a code that basically transforms the search icon to a clickable search bar. While it is not a perfect solution, it works for now.

The solution works great on desktop, but on mobile, since it transforms the search icon, it is placed between the cart and logo section and takes up too much space. The ideal placement would be below the main header within its own section.

What i think should work is to move the search icon alone below the main header section, then i could make it full width.

Anyone got a simple solution to do this?

1 Like
2

Hi @Joachimgolf ,

Can you share your website so we can provide a code specific for you?

3

Hi @Joachimgolf

Can you give me your page URL (with pass if your store password is enabled)
and provide some screenshots so we can better understand the problem you are having?

Kind & Best regards,
GemPages Support Team

4

@Joachimgolf

Please share your site URL,
I will check out the issue and provide you a solution here.

5

Hello @made4Uo

Thank you for your reply.
Here is the preview link, as the design is not live yet: https://frqql303wvtdqw7n-50682036424.shopifypreview.com

Should not be any password.

The ideal solution would have it look something like this:

image.png
image.png400×620 104 KB

6

Hi @Joachimgolf

You can try adding the below code by following these steps.

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

@media screen and (max-width: 990px){
.header__search{
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
}
.header__search > details{
    width: 100%;
    padding: 0 12px;
}
.header__search > details > .header__icon{
       width: 100%;
}
.header{
    position: relative;
    padding-bottom: 58px !important;
}
.header .header__icons .icon-search {
    color: #707070;
}
.header .header__icons span{
  justify-content: flex-start !important;
}
.header__search summary span::after {
    content: "Søk etter produkter";
    padding-left: 1.2rem;
    font-size: 1.2rem;
    color: rgb(147, 147, 147);
}
.shopify-section-header-hidden{
  top: calc(-1 * var(--header-height) - 58px);
}
}

Best regards,
GemPages Support Team

7

Hello @GemPages !

The solution worked flawlessly, thank you!

8

I do appreciate your compliment! :face_blowing_a_kiss:

9

hi i tried the code and it did not work for me could you please help me with a solution my store link is https://www.eware.co.za/