Changing Background Colour Of Search Box Drop Down Results

Solved
Crowbius
Excursionist
16 1 2

Hi all,

I'm using the Debut Theme. My store url is here and the password is lawday.

I'm trying to find out how to change the background colour of the drop down results of the search bar in the header. I would like it to be white, instead of transparent.

Can anybody help?

Thank you in advance.

0 Likes
Crowbius
Excursionist
16 1 2

This is an accepted solution.

Nevermind. Actually managed to figure this one out myself  with some trial and error.

For anybody else, I just changed the background colour to the white colour code (#FFFFFF). 

The original looked like;

.predictive-search-wrapper {
  @include fade-transition-base($transition-duration-fast);
  z-index: $z-index-predictive-search-wrapper;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -$input-border-width;
  border: $input-border-width solid $color-border-form;
  background-color: $color-bg;
  overflow-y: auto;
  display: none;

And then I just changed the background-color;

.predictive-search-wrapper {
  @include fade-transition-base($transition-duration-fast);
  z-index: $z-index-predictive-search-wrapper;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -$input-border-width;
  border: $input-border-width solid $color-border-form;
  background-color: #FFFFFF;
  overflow-y: auto;
  display: none;

Hopefully this can help somebody else out.

0 Likes
Anish2
Tourist
9 0 2

Hi, 

I like the live search that the min you put G everything that starts with G is displayed. 

 

How did you manage that. Could you elaborate so that I can incorporate it.

 

Thanks

Anish

0 Likes
Luscioussleep
New Member
1 0 0

I have been trying to sort this for nearly a month and used your coding which now has finally worked so thank you for leaving this up. 

0 Likes
forgenaturals
New Member
1 0 0

Hi there, 

We've got the same problem you had.  I've been looking at the code in Debut and can't figure out where that piece of code is located.  Can you please direct me? 

thanks

Louise

0 Likes
Anish2
Tourist
9 0 2
I had a chat with the Shopify expert on Help Chat, they helped me out by
adding a nice black border around my search box. You can ask them as they
do 1 code free as part of the package.
0 Likes