Styling search to look like menu search functionality

Ivory Search › Forums › Support › Styling search to look like menu search functionality

Viewing 10 reply threads

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

  • Author
    Posts
    • February 22, 2022 at 9:36 PM #10807
      Candide
      Participant
      • Topics: 1
      • Replies: 5

      Hello,

      I have a posts archive page which I want to add Ivory Search to. I want the search form styling to match the way it appears when added to menu (i.e. the search icon, when click it animates a sliding search input field)

      Can you please help me achieve this?

      Thanks,

    • February 22, 2022 at 9:55 PM #10808
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,737

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

      That form of style is only achievable to menu search.

      You can add a navigation menu on the page and add a menu search to it.

      Best regards,
      Ivory Search Support

    • February 22, 2022 at 10:03 PM #10810
      Candide
      Participant
      • Topics: 1
      • Replies: 5

      Thanks!

    • February 24, 2022 at 6:44 PM #10829
      Candide
      Participant
      • Topics: 1
      • Replies: 5

      Can I please ask how I can style the slide out input box on the menu search form to have no border? I am trying various CSS selectors and it doesn’t seem to be responding..

      Thanks!
      Candide

    • February 25, 2022 at 7:35 PM #10835
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,737

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

    • February 28, 2022 at 5:01 PM #10855
      Candide
      Participant
      • Topics: 1
      • Replies: 5
      This reply has been marked as private.
    • February 28, 2022 at 7:51 PM #10856
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,737

      You can remove the border 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.sliding input.is-search-input {
    border: 0 !important;
}
    • February 28, 2022 at 8:19 PM #10858
      Candide
      Participant
      • Topics: 1
      • Replies: 5

      That is perfect – thank you so much!!

    • February 28, 2022 at 8:53 PM #10859
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,737

      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:

      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.

    • March 1, 2022 at 7:13 PM #10865
      Candide
      Participant
      • Topics: 1
      • Replies: 5

      Done! šŸ™‚

      Can I ask for one more CSS cheat please? I want the sliding text bar to fill up the entire space available in the container and have tried

      .is-menu.sliding input.is-search-input {
    border: 0 !important;
    width: 100% !important;
}

      but that didn’t work… is this doable?

    • March 3, 2022 at 2:07 PM #10898
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,737

      I want the sliding text bar to fill up the entire space available in the container

      Then please use the Full Width style in the plugin Menu Search settings instead of the Sliding style.

  • Author
    Posts
Viewing 10 reply threads

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