Search Bar Stay Expanded Under Header - TRADE Theme

I am trying to get the search field to be expanded automatically below the header on my site instead of having an icon to click on. Would appreciate any guidance on this.

1 Like

Hello @svandervort .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

https://a69add-8f.myshopify.com/

1 Like

Do you want to like this @svandervort ?

1 Like

Yes

1 Like
  1. Go to file r ‘header-search.liquid’ find the code “header__search” like this

BSSTekLabs_0-1723130857677.png

2 Likes
details[open] .modal-overlay, .modal__close-button .icon {
    display: none !important;
}
details[open]>.search-modal, #MainContent {
margin-top: 54px !important;
}

Add this code to last line file base.css

1 Like

When you’re done, you’ll get results like this.

1 Like

If you want hide search icon. Add more this code

.header__icon {
    display: none !important;
}
1 Like
.mega-menu[open] .mega-menu__content {
    margin-top: 54px !important;
}

Add more code to base.css to show full sub menu

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @svandervort .
1 Like
.header__heading-logo {
    position: relative !important;
    z-index: 999 !important;
}
details[open]>.search-modal, #MainContent {
    margin-top: 60px !important;
}

Add more code to base.css to display full logo @svandervort

2 Likes

Hey! I cannot get this to work…is there something you can post that I can copy and paste…It added the word Details with an arrow??

1 Like

What do you need help with, please state the problem you are having @cmcmahon211 .

And now nothing in my header is clickable

Can you message me and share the link to your store so I can check?

I just removed the code, ha…my whole header was messed up…can you go through again what I need to put in there? I thought I followed the steps exactly.

https://d4e571-49.myshopify.com/

I will try your steps again from above so you can check it.


Is this where I add it?

Just add this code altogether to hide close button and search icon from header:

details[open] .modal-overlay, .modal__close-button .icon {
    display: none !important;
}

details[open]>.search-modal, #MainContent {
margin-top: 80px !important;
}

details .header__icon-close {
  display: none;
}

.header__icon.header__icon--search {
    display: none !important;
}