Search bar style/CSS

[joshuamayo]

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 Marcinko]

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:

[html].asp_main_container {
background-color: transparent !important;
}[/html]

[joshuamayo]

Perfect! Thank you so much, Ernest!

[joshuamayo]

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

[Ernest Marcinko]

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:

[html].prosettings {
display: none !important;
}[/html]

[joshuamayo]

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

[Author]

Posts