How to Show Search Form in Mobile just small icon?

Ivory Search › Forums › Support › How to Show Search Form in Mobile just small icon?

Viewing 4 reply threads

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

  • Author
    Posts
    • July 8, 2020 at 7:45 PM #5207
      shivaji
      Participant
      • Topics: 1
      • Replies: 2

      Hope you re doing good. I am using your plugins and I really like the way it works.

      I have one question.

      How to Show Search Form in the Mobile just a small search icon and in desktop a regular search box?

      Actually in mobile due to less space, I want to show the search as icon and on-click it will open the search box at the bottom of icon, whereas in desktop, the normal search box will be visible.

      I am using this shortcode and inserted this in my theme (Porto) header.php template.

      [ivory-search id=”18977″ title=”Default Search Form”]

    • July 8, 2020 at 7:49 PM #5208
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Yes, I am doing good.

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

      Could you please share your site URL where it’s displaying so that I can help you?

      Best regards,
      Ivory Search Support

    • July 8, 2020 at 8:07 PM #5209
      shivaji
      Participant
      • Topics: 1
      • Replies: 2

      Thanks for your quick reply on this.

      Here goes my page: https://events.anandodhara.com/

    • July 9, 2020 at 11:55 AM #5218
      shivaji
      Participant
      • Topics: 1
      • Replies: 2

      hello support,

      can I expect any reply on this, please?

      Thanks,
      shivaji

    • July 9, 2020 at 12:10 PM #5219
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Sorry for the late reply.

      You can hide regular search form on mobile by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

      @media (max-width: 491px){
#header .header-center form {
    display: none !important;
}
}

      Then display search icon on mobile as described on the below pages.

      Display Search Form In Mobile Site Header

      Change Menu Search Form Style

      After that, we can position it using CSS.

  • Author
    Posts
Viewing 4 reply threads

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