How to change search text color or add a white box in Debut header?

Store Design
1

Site is twincitiesebikes.com.

Our header background is a deep blue (corporate color).
When selecting search, the black text entered does not show.

I would like to have a white box OR have the search text be white.

I think the white box might be better because on a phone the search box ends up as a transparent box overlaying the logo and the text is impossible to see.

Thank you for your help.

2

Hi @khacmac

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->theme.scss.css->paste below code at the bottom of the file

.search-header__input, .search-bar__input {
   background-color: white !important;
}

PageFlyKate_0-1675977878638.png

Hope my answer will help you.

3

Hello @khacmac

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.scss.css file and paste the following code below:

.search-header__input, .search-bar__input {
   background-color: #fff;
}

Let us know how it works for you.
Best regards,
GemPages Support Team

4

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.search__input.search-bar__input,
.search-header__input.search__input {
  background: #fff;
}
5

Thank you. It seems most of the other solutions did not work with my platform, Debut. But this one did.

6

Unfortunately, Debut does not appear to have a base.css file.