Center the search box in the page and increase its width

Ivory Search › Forums › Support › Center the search box in the page and increase its width

Viewing 2 reply threads

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

  • Author
    Posts
    • May 19, 2020 at 2:53 PM #4730
      JG
      Participant
      • Topics: 1
      • Replies: 1

      Hello!

      I was wondering how do I center the search box in my page and how can I make it full width (similar to your search box on the documentation page)

      Thanks for your help!

      James

    • May 19, 2020 at 7:49 PM #4736
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

      We can achieve this using CSS.

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

      Best regards,
      Ivory Search Support

      • May 19, 2020 at 8:55 PM #4740
        JG
        Participant
        • Topics: 1
        • Replies: 1

        Thanks for your reply!

        I am afraid that my website is not public as of yet, can you give me an indicator of what parameters need to be altered in the CSS?

        All the best,

        James

    • May 20, 2020 at 11:42 AM #4751
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      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

      form.is-search-form {
    width: 100%;
    display: table;
    margin: 0 auto;
}

form.is-search-form label {
    width: calc( 100% - 100px );
}

form.is-search-form label input.is-search-input {
    width: 100%;
}

      Please change the above-shared CSS code according to your requirement.

  • Author
    Posts
Viewing 2 reply threads

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