How to change the search box height to match menu items

Ivory Search Forums Support How to change the search box height to match menu items

Viewing 9 reply threads

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

  • Author
    Posts
    • #10484
      chrisbulow
      Participant
      • Topics: 2
      • Replies: 13

      Good morning.

      I’ve checked the FAQ https://ivorysearch.com/docs/use-custom-css-code/ and looked through previous requests in the forums here but can’t see reference to the CSS code snippet I’d need to be able to change the search box height to align more closely with that defined in my theme. You can see the height differs in the attached screenshot from https://salutethepig.com the box height needs increasing by a few pixels to align the bottom edge with the bottom edge of the menu boxes.

      Can you assist? Thanks.

      Attachments:
      You must be logged in to view attached files.
    • #10543
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

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

      You can achieve this 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 .is-form-style input.is-search-submit,
      .is-menu .is-form-style input.is-search-input {
          height: 38px;
      }

      Best regards,
      Ivory Search Support

    • #10554
      chrisbulow
      Participant
      • Topics: 2
      • Replies: 13

      Thanks very much.

    • #10581
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      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.

    • #11923
      chrisbulow
      Participant
      • Topics: 2
      • Replies: 13

      Good afternoon.

      I wonder if you can assist again? I’ve moved the Ivory Search into the Widgets section of my site and hope you can tell me what CSS code snippet I now need to increase the search box height by a factor of say 50% or 75% to more closely align with a box located beneath it?

      I’ve added a screen shot to show where I’m hoping to effect this change.

      Thanks very much

      Chris

      Attachments:
      You must be logged in to view attached files.
    • #11950
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Please use the below CSS code to achieve this.

      
      .is-form-style button.is-search-submit,
      .is-form-style input.is-search-input,
       .is-form-style .is-search-icon {
          height: 38px;
      }
    • #11951
      chrisbulow
      Participant
      • Topics: 2
      • Replies: 13

      Thanks for the swift reply. I changed the Custom CSS under Ivory Search/Settings to use that snippet instead and then cleared the Cloudflare cache but the Ivory Search box still looks smaller than the box below it (the screen shot below is from a desktop browser view). Am I missing something obvious here? Thanks.

      Attachments:
      You must be logged in to view attached files.
    • #11965
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Please increase the height 38px in the above shared CSS code to suit your need.

    • #11968
      chrisbulow
      Participant
      • Topics: 2
      • Replies: 13

      Thank you; my apologies for missing that completely obvious point šŸ™‚ Appreciated as always

    • #11973
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,747

      Not an issue at all.

      You are most welcome here šŸ™‚

Viewing 9 reply threads

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