Search bar style/CSS

[joshuamayoParticipant]

I am having an issue stylizing the search bar exactly how I want. When you land on the page of the URL to the staging site I provided, you will see a search bar that is longer on top of a search bar that is smaller and shorter. The smaller shorter one is my attempt to re-create the one that sits above. Can you assist me in re-creating the bar to look like the other one? Thank you so much!

[Ernest MarcinkoKeymaster]

Hi!

Actually, it looks you got very close to that layout, I can see only one thing that needs to be changed, and it’s to force the main container to a transparent background.

Try using this custom CSS for this purpose:

.asp_main_container {
    background-color: transparent !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[joshuamayoParticipant]

Perfect! Thank you so much, Ernest!

[joshuamayoParticipant]

One more question. Is it possible to hide the dropdown using CSS?

[Ernest MarcinkoKeymaster]

Hi!

There is an option for that, on the Frontend search settings -> General panel, the first option: Show search settings switch on the frontend?

If you prefer custom CSS, then:

.prosettings {
    display: none !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[joshuamayoParticipant]

I knew it had to be an option, I just completely missed it. Thank you again, Ernest!

[Author]

Posts