Search box - navigation

Shapely
1

Hi Colorlib team,

I would like to change the color of the search box icon when I hover over it in the header menu. It is purple and I could not find a way to change the color.

Could you please help me with this :)?

2

Hi @ideatracker,

I hope you are well today and thank you for your question.

If you want to change hover color of magnifier search icon in the header then you can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


nav .search-widget-handle i.fa.fa-search:hover {
    color: #000;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Thank you very much! Is there also a way to change the search box color itself (the symbol next to the area where you can enter the search text)?

4
Is there also a way to change the search box color itself (the symbol next to the area where you can enter the search text)?

Use below CSS code to achieve this.

nav .search-widget-handle #searchsubmit {
    background: #000;
    border-color: #000;
}