Make the magnifying glass icon white

• 

  darkshadowseveryday · Member · Aug 1, 2015 at 10:33 pm

  • Copy link
  • Add topic to favorites

  When I set my navigation bar to a dark color, the text on the menu turns white, but the magnifying glass icon stays black.

  I want to have a dark navigation bar, but if I do then the magnifying glass is invisible, and people won’t be able to search.

  Is there a way to turn that icon white? Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  micawbr · Member · Aug 2, 2015 at 3:40 am

  • Copy link

  Hello,
  If you have the Premium Plan, you can change the magnifying glass with some CSS. First you’d need to create (or obtain) a white version of the magnifying glass, then upload it to your media gallery. Copy the link and then use it in the CSS code below, replacing “path to your search icon” with the actual link to your file:

  .site-header .search-field {
      background-image: url("/path/to/your/search-icon.png");
  }

  Go to Customizer > CSS and paste in the updated CSS code.

• 

  thesacredpath · Member · Aug 2, 2015 at 5:54 am

  • Copy link

  Hi, I took a look at the CSS for the search icon, and I think you can easily resize it by changing the background size, which is currently set at 24px horizontal and vertical. Add this to your custom CSS and adjust the two 24px values as desired.

  .site-header .search-field {
      background-size: 24px 24px;
  }