Search Icon color won't change

Ivory Search › Forums › Support › Search Icon color won't change

Tagged: , ,

Viewing 9 reply threads

You must be logged in to create new topic or reply to the topic.

  • Author
    Posts
    • August 22, 2019 at 1:39 AM #2670
      courageous999
      Participant
      • Topics: 3
      • Replies: 9

      As you can see in the image, I cannot figure out how to change the Search Icon’s color. How do you change the magnifying glass’ color? Nothing is working, not custom CSS and not changing the color from within the “Customize this form” section in your settings. Only background color is changing!

      Attachments:
      You must be logged in to view attached files.
    • August 22, 2019 at 3:34 PM #2672
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

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

      Are you displaying the search form in the menu?

      Could you please share your site URL where it’s displaying so that I can help you to change its color?

      Best regards,
      Ivory Search Support

    • August 22, 2019 at 8:47 PM #2682
      courageous999
      Participant
      • Topics: 3
      • Replies: 9
      This reply has been marked as private.
    • August 23, 2019 at 6:29 PM #2692
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Yes, the WordPress customizer only displays the website by resizing the browser, therefore, your “tagDiv Mobile Theme” plugin functionality won’t work there.

      You can change the magnifier icon color by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

      .is-menu-wrapper .is-menu svg.search-icon {
    fill: #FFF;
    margin: 15px 15px 0 0;
    float: right;
}

.is-menu-wrapper .is-menu button.is-search-submit {
    margin: 0;
}

.is-menu-wrapper .is-menu input.is-search-input {
    width: 230px;
}
    • August 23, 2019 at 8:13 PM #2699
      courageous999
      Participant
      • Topics: 3
      • Replies: 9

      That’s perfect!!

      One other thing that I hope you can help me with is the location of where the search text input appears after clicking the magnifying glass icon. Current attached image shows where I want it to appear on Desktop. I tried achieving this myself but that also affected the tablet and mobile search text input location.

      Currently, the tablet (Ipad) location of the text input is broken when the magnifying glass icon is clicked but the mobile is fine; this is without any custom CSS, and the Desktop location of the text input (as can be seen in the image) is not where I want it to appear.

      Image Note: The red squares is where I’d like the search text input to appear on Desktop, and on tablet (if space allows).

      Thanks

      Attachments:
      You must be logged in to view attached files.
    • August 23, 2019 at 8:39 PM #2702
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Please try using below custom CSS code to achieve it.

      .sf-menu li.is-menu.dropdown form {
    min-width: 320px;
    left: 0;
    right: auto;
}
    • August 23, 2019 at 9:02 PM #2705
      courageous999
      Participant
      • Topics: 3
      • Replies: 9

      This works great on Desktop and mobile, but on Ipad it gets cut off as can be seen in the image attached.

      Attachments:
      You must be logged in to view attached files.
    • August 24, 2019 at 1:27 PM #2714
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Just change the left property value 0 in the above CSS code to -20px or more until it displays properly for you on iPad.

    • August 26, 2019 at 6:13 AM #2721
      courageous999
      Participant
      • Topics: 3
      • Replies: 9

      This is not ideal but it works. Thanks

    • August 26, 2019 at 8:19 PM #2722
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      You are most welcome here 🙂

  • Author
    Posts
Viewing 9 reply threads

You must be logged in to create new topic or reply to the topic.