Resize Header Search Field and Keep With Search Icon

Ivory Search › Forums › Support › Resize Header Search Field and Keep With Search Icon

Tagged: , ,

Viewing 6 reply threads

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

  • Author
    Posts
    • June 14, 2023 at 2:23 AM #16518
      EditorAl
      Participant
      • Topics: 1
      • Replies: 3

      Greetings! Our client would like to reduce the width of the AJAX search field and keep it with the search icon on the right of the header. I tried code that I found in the forum to shorten the search field but it moves away from the search icon (see attachment).

      .is-search-input {
      width: 600px !important
      }

      Site: https://dementialv.org/

      Thank you!

      Attachments:
      You must be logged in to view attached files.
    • June 14, 2023 at 6:00 PM #16529
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

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

      You can achieve this by removing the above CSS code and adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

      body > form.is-search-form {
    width: 300px;
    max-width: 100%;
    float: right;
}
.body-wrapper {
    clear: both;
}

      Best regards,
      Ivory Search Support

    • June 14, 2023 at 7:13 PM #16536
      EditorAl
      Participant
      • Topics: 1
      • Replies: 3

      Hello! That works perfectly! Not only do you have a great product; your support team is wonderful, too!

      Thanks again and have a great day.
      Al

    • June 14, 2023 at 7:20 PM #16539
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      You are always welcome, Iā€™m glad I was able to help you with this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

      Click to leave a review

      Iā€™d really appreciate that. šŸ™‚

      And if I can be of any further assistance please don’t hesitate to ask.

    • June 15, 2023 at 7:45 PM #16555
      EditorAl
      Participant
      • Topics: 1
      • Replies: 3

      Hello,

      I would be glad to leave a review. But first, I have another problem.

      The header search works perfectly, as long as one does not hit Enter. When that happens, the user gets a SEARCH RESULTS page. The header expands and a line of text and missing image icons appears. Any ideas on how to get rid of that page and the odd line?

      https://dementialv.org/?s=health&id=1250

      Thanks,
      Al

      Attachments:
      You must be logged in to view attached files.
    • June 16, 2023 at 12:18 AM #16557
      EditorAl
      Participant
      • Topics: 1
      • Replies: 3

      Wait! I turned off the “Search button displays search results page” switch under “Configure how the search button should work clicking on it.” That solved the problem.

      I still don’t know why that odd missing image icon and text appeared but it doesn’t matter now.

      Thanks again,
      Al

    • June 16, 2023 at 4:21 PM #16561
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Glad to hear that šŸ™‚

  • Author
    Posts
Viewing 6 reply threads

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