How can I edit the search bar on my website's header?

[coolerdrinks]

Hi there,

Currently, the search bar on the header of my website is transparent. I would like to make the background white. Additionally, it is only a magnifying glass and I would like to add the word “Search”. I have included the examples below.

My store is: https://cooler-drinks.myshopify.com/

PW: steeck

Thanks for your help!

[infoatcodelab7]

@coolerdrinks

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

.header__search:before {
  content: "Search";
  line-height: 2.5;
  margin-right: 100px;
}
.header__search {
  background: #f7f7f7;
  padding: 0 0 0 10px;
}

[coolerdrinks]

Amazing, thank you!

Do you know how I could only implement the search bar for desktop view and keep the magnifying glass for mobile view?

It has skewed the mobile view and excluded the shopping cart and only has space for the search bar now. I attached a screen shot.

Thank you so much!