Search Bar Stay Expanded Under Header - TRADE Theme

[svandervort]

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.

[BSS-TekLabs · Accepted solution]

1. Go to file r 'header-search.liquid' find the code "header__search" like this

[BSS-TekLabs · Accepted solution]

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

[BSS-TekLabs · Accepted solution]

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

[BSS-TekLabs · Accepted solution]

.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 .

[BSS-TekLabs]

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.

[svandervort]

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

[BSS-TekLabs]

Do you want to like this @svandervort ?

[svandervort]

Yes

[BSS-TekLabs · Accepted solution]

1. Go to file r 'header-search.liquid' find the code "header__search" like this

[BSS-TekLabs · Accepted solution]

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

[BSS-TekLabs · Accepted solution]

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

[BSS-TekLabs]

If you want hide search icon. Add more this code

.header__icon {
    display: none !important;
}

[BSS-TekLabs · Accepted solution]

.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 .

[BSS-TekLabs · Accepted solution]

.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 

[BSS-TekLabs]

[cmcmahon211]

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??

[BSS-TekLabs]

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

[cmcmahon211]

And now nothing in my header is clickable

[BSS-TekLabs]

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

[cmcmahon211]

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/

[cmcmahon211]

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

[cmcmahon211]

Is this where I add it?