HELP! Change the color around search bar icon

Store Design
,
1

See picture attached. im trying to change the color just around search bar icon on
Mobile and desktop which is currently white. Desktop would need a different cover color. I want to keep icon black. Theme is Hyper 1.3.3 by FoxEcom who couldn’t help with this https://upwardpacific.com/

Icon background - #FFCF49

Icon hover color - FCB900

Help?

Community Sesrch Bar Help1
Community Sesrch Bar Help11920×2400 606 KB

2

Hi @upwardpacific

Welcome to the community.

First, if you could not use capital letters and exlamation sign in the title, that HELP! Looks like there is to get attention, more than other posts, and that is not fair. It is not an urgent issue for sure.

But for styling that search button, try this code

.search__icon-search {
    background: #ffcf49;
    height: 56px;
    width: 56px;
    border-bottom-right-radius: 50%;
    margin-right: -15px;
    border-top-right-radius: 50%;
}
.search__icon-search:hover {
    background: #FCB900;
}

You can add it in Edit Theme > your header section > Custom CSS setting or maybe in assets/custom.css.

3

Hi @upwardpacific

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

.search__icon-search {
  background: #FFCF49;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: -10px;
  transition: all 0.3s ease;
}
.search__icon-search svg {
  color: #000 !important;
}
.search__icon-search:hover {
  background: #FCB900;
  transform: scale(1.05);
}
@media (min-width: 768px) {
  .search__icon-search {
    height: 52px;
    width: 52px;
    margin-right: -12px;
  }
}
@media (max-width: 767px) {
  .search__icon-search {
    height: 42px;
    width: 42px;
    margin-right: -8px;
  }
}

image
image1339×388 93.4 KB

image
image364×161 7.87 KB

Best regards,
Devcoder :laptop:

4

Sorry about that. Makes perfect sense….This worked perfectly. Appreciate the help!

5

Hi @upwardpacific

Add the following custom CSS, which clearly references the search icon wrapper. Using media queries, you are able to give a background color for desktop and a background color for mobile. Keep the icon black by styling the fill of the SVG. Add hover states for background colours. Test on different devices to make sure it looks and works well.