How to make search icon a coloured search bar

[MollieHammond]

Hi all,

I was hoping to get some help in changing our search icon into a coloured search bar. At the moment it looks like this. I am hoping to turn it into a rounded cornered rectangle with a green background to make it stand out. Colour code: 657d67.

We are using the Palo Alto theme

URL: https://www.coffee.prestigerepairs.com.au/

Thank you so much for any assistance. 

[SEOAnt-Jeffery]

Hi @MollieHammond

You can try to add below CSS at the bottom of theme.liquid and see if it is what you want.

<style>
search-popdown__toggle navlink navlink--icon {
background-color: #657d67;
border-radius: 7px;
}
</style>

It shall look like this below:

[Bundler-Manuel]

Hi Mollie @MollieHammond  The code in the solution reply should help you in conveniently changing the search icon to a search bar, have a look at it here https://community.shopify.com/c/shopify-design/change-search-icon-to-search-bar-in-refresh-theme/m-p... 

[WebDeskSolution]

Hello @MollieHammond 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search theme.css
• Insert the provided CSS code at the end of the file and save the changes.

.mobile-menu .search-popdown.mobile-menu__button 
{
    background: #657d67;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#NavStandard .menu__item summary.search-popdown__toggle.navlink 
{
    background: #657d67;
    border-radius: 20%;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

[PaulNewton]

@MollieHammond that will require code edits to have it default to open and remove positioning classes, etc so it's no longer a popdown.

Not to mention any mobile behavior.

If you need this customization then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.