Customize the menu search bar

Ivory Search › Forums › Support › Customize the menu search bar

Viewing 7 reply threads

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

  • Author
    Posts
    • January 3, 2023 at 7:08 PM #14183
      eribertovanderscrofolonen
      Participant
      • Topics: 1
      • Replies: 3

      Hi,
      first of all, congrats for your plugin ( useful and simple ).

      I’ve only a few question about it:

      1. In my site (https://www.registrostoricotriumph.it/) I need to fix the searching box ( width and height doesn’t work well with the rest of the menu ) and maybe put a place holder inside the search bar
      2. If I use the default icon or another description, in mobile version the menu search is not part of the menu instead, but takes the colour of the header.

      For me it’s good the part 1, but how can I confing the CSS for this?

    • January 3, 2023 at 7:37 PM #14187
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

      Please make sure that you have configured a search form in the Menu Search options as shown in the below screenshot.

      View post on imgur.com

      You can decrease the search bar width by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings

      .is-menu.default form {
    max-width: 100%;
    width: 200px;
    padding-top: 14px !important;
}

      Best regards,
      Ivory Search Support

    • January 3, 2023 at 7:53 PM #14188
      eribertovanderscrofolonen
      Participant
      • Topics: 1
      • Replies: 3

      So close to the result …. I need the last step ! Thx ! šŸ™‚

    • January 3, 2023 at 7:56 PM #14189
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      What do you mean by the last step?

    • January 3, 2023 at 8:07 PM #14190
      eribertovanderscrofolonen
      Participant
      • Topics: 1
      • Replies: 3

      The last piece of configuration… šŸ™‚

      ps. If i want a bold placeholder?

    • January 3, 2023 at 8:24 PM #14191
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Please use the below custom CSS code to make the placeholder text bold.

      .is-menu input.is-search-input::-webkit-input-placeholder {
   font-weight: 800;
}

.is-menu input.is-search-input:-moz-placeholder { /* Firefox 18- */
   font-weight: 800;
}

.is-menu input.is-search-input::-moz-placeholder {  /* Firefox 19+ */
   font-weight: 800;
}

.is-menu input.is-search-input:-ms-input-placeholder {  
   font-weight: 800;
}
    • January 9, 2023 at 6:05 PM #14254
      eribertovanderscrofolonen
      Participant
      • Topics: 1
      • Replies: 3

      thxxxxx!! šŸ™‚

    • January 10, 2023 at 5:20 PM #14266
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      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.

  • Author
    Posts
Viewing 7 reply threads

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