How to change shape and size of "search" -spotlight theme

Store Design
, ,
1

I want to change shape and size of search box on header, I want it to be expandable after you click it.

like on nude project - https://kartbagrationvalley.com/

when you click “search” it expands.

my website: https://kartbagrationvalley.com/

Thank you :folded_hands:

Nikxj44_1-1718792275808.png
Nikxj44_1-1718792275808.png1919×872 407 KB

2

Hi @Nikxj44

Paste this CSS in base.css

.Search__SearchBar {
    margin: auto;
    display: flex;
    align-items: center;
    max-width: 50rem;
    border: 1px solid #000000;
    padding: 10px;
    border-radius: 5px;
}

Let me know if it’s helpful by like and accept my solution.

Best Regards,

Team_OSC

3

it didn’t changed anything, I want to make search to be clickable text “search” when you click it it expands like nude project

4

@Nikxj44

details[open]>.search-modal {
    background: #ffffff;
}
.field__input {
  border-radius: 0;
  background: #ffffff;
  margin: auto;
}
.search-modal {
  height: 40%;
  min-height: 40%;
}
.modal__content {
  top: 100%;
}
.field:after {
  box-shadow: none;
}
.field:hover {
  border: none;
}
.field:hover.field:after {
  box-shadow: none;
  border-radius: 0;
}
.field__input:focus {
  box-shadow: none;
  border-radius: 0;
}
.field__button {
    left: -40px;
}
@media screen and (min-width: 990px) {
    .search-modal__form {
        max-width: 100%;
    }
}
@media screen and (max-width: 767px) {
   .search-modal {
      height: 100%;
      min-height: 100%;
}
}

I hope this will help you.

Best Regards,

Team_OSC