Format Appearance of the Search Box

Ivory Search › Forums › Support › Format Appearance of the Search Box

Viewing 7 reply threads

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

  • Author
    Posts
    • October 16, 2019 at 10:07 AM #3121
      FionaFell
      Participant
      • Topics: 1
      • Replies: 3

      Is there as help document that will help me adjust the form width for the form placed in my menu here: https://turret.com.au/?s=&post_type=product

      I want to make the box narrower so it doesn’t take so much space on the header menu, or cover the woocommerce cart button.

      – Fiona

    • October 16, 2019 at 9:04 PM #3125
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

      You can change its width 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 input.is-search-input {
    width: 200px;
}

      The search form is not overlapping on the View Cart button but the View Cart button is going under the search form, therefore, reducing the width of the search form won’t make any difference.

      You have to contact your theme support to move the position of View Cart button.

      Best regards,
      Ivory Search Support

    • October 17, 2019 at 5:10 AM #3127
      FionaFell
      Participant
      • Topics: 1
      • Replies: 3

      Thanks. I’ve reduced the width of the search form, with your directions.
      Then I edited the theme code to give it a bit more space in the main menu to avoid the overlapping of elements.

      Can you share with me a CSS snippet that I can use to:
      – reduce the font size and change the colour?
      – set the input box padding to reduce the space between the word ‘search’ and the border?
      – change the border colour and style?

      Thanks a bunch for your help on helping me match the site style.
      Excited to see it.

      – Fiona

    • October 17, 2019 at 2:27 PM #3136
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      You can make changes in the style of search form using Search Form Customizer as displayed in the attached screenshot.

      Attachments:
      You must be logged in to view attached files.
    • October 18, 2019 at 6:56 AM #3149
      FionaFell
      Participant
      • Topics: 1
      • Replies: 3

      I was able to swap the border and font colours. Thanks for that.

      I can’t see options for the font size or the padding in the customizer, can you share a CSS snippet with me for these pieces?

      – Fiona

    • October 18, 2019 at 3:13 PM #3162
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      I can’t see options for the font size or the padding in the customizer, can you share a CSS snippet with me for these pieces?

      You can change it using below CSS code.

      header #head_wrp .is-search-form input.is-search-input {
    padding: 8px 8px;
    font-size: 15px;
}
    • October 19, 2019 at 5:05 AM #3178
      FionaFell
      Participant
      • Topics: 1
      • Replies: 3

      Thanks.

      That code snippet really helped me fit it into the look of my website.

      – Fiona

    • October 20, 2019 at 7:34 PM #3182
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      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 7 reply threads

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