Center the position of the search field on a page

Ivory Search › Forums › Support › Center the position of the search field on a page

Tagged: ,

Viewing 9 reply threads

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

  • Author
    Posts
    • May 14, 2020 at 11:18 AM #4683
      Pierre
      Participant
      • Topics: 3
      • Replies: 5

      Hi,
      how to change (center) the position of the ajax search field on a page?
      Thanks

    • May 14, 2020 at 12:46 PM #4687
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,748

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

      We can achieve it using CSS.

      Could you please share the page URL from your site where it is displaying so that I can help you to achieve it?

      Best regards,
      Ivory Search Support

    • May 14, 2020 at 1:42 PM #4688
      Pierre
      Participant
      • Topics: 3
      • Replies: 5
      This reply has been marked as private.
    • May 14, 2020 at 6:30 PM #4689
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,748

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

      .page-id-810 form.is-search-form {
    display: table;
    margin: 0 auto;
}
    • May 14, 2020 at 7:58 PM #4692
      Pierre
      Participant
      • Topics: 3
      • Replies: 5

      Thank you very much, but then the list of results is not centered anymore?

    • May 16, 2020 at 12:04 PM #4703
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,748

      This is because you are using below custom CSS code on your website so please remove it to display the search results center aligned.

      div.is-ajax-search-details, div.is-ajax-search-result {    
    width: 1190px!important;
    z-index:auto;
}
    • May 16, 2020 at 1:41 PM #4707
      Pierre
      Participant
      • Topics: 3
      • Replies: 5

      I removed it, but I would like, if possible, to:
      – increase the width of the results box
      – center it on the page (it is not)
      Thank you

    • May 17, 2020 at 1:46 PM #4715
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,748

      Please also use the below CSS code to achieve it.

      .page-id-810 div.is-ajax-search-details, 
.page-id-810 div.is-ajax-search-result {
    margin-left: -100px;
}
    • May 17, 2020 at 2:03 PM #4717
      Pierre
      Participant
      • Topics: 3
      • Replies: 5
      This reply has been marked as private.
    • May 17, 2020 at 2:54 PM #4718
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,748

      You are most 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:

      https://wordpress.org/support/plugin/add-search-to-menu/reviews/?filter=5

      I’d really appreciate that. 🙂

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

  • Author
    Posts
Viewing 9 reply threads

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