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.
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.
Do you want to like this @svandervort ?
Yes
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
If you want hide search icon. Add more this code
.header__icon {
display: none !important;
}
.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 .
.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
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??
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.
I will try your steps again from above so you can check 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;
}