Move Search Button Further Right in the Menu

Ivory Search › Forums › Support › Move Search Button Further Right in the Menu

Viewing 6 reply threads

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

  • Author
    Posts
    • September 22, 2020 at 4:51 PM #5811
      Irene B.
      Participant
      • Topics: 1
      • Replies: 5

      Hello!

      Hope you can help. I have some questions:

      1- How can I move the Search button (“Cerca nel sito”) further to the right, creating some distance from the rest of the menu?
      2- The button “cerca nel sito” isn’t aligned to the rest of the items in the menu until I scroll down and the height of the menu bar is reduced (see screenshots with both scenarios). How can I fix this?
      3- Can I highlight or put the text “cerca nel sito” in a box?

      Thank you,
      Irene

      Attachments:
      You must be logged in to view attached files.
    • September 22, 2020 at 11:10 PM #5815
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

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

      Best regards,
      Ivory Search Support

    • September 23, 2020 at 10:30 PM #5819
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

      #Top_bar li.is-menu {
    padding: 0 0 0 20px;
}
#Top_bar li.is-menu a {
    line-height: 50px;
    background: #d2cfcf !important;
    padding: 0 15px !important;
}
      • September 24, 2020 at 10:49 PM #5828
        Irene B.
        Participant
        • Topics: 1
        • Replies: 5

        Fantastic! Thank you for your help!!

        What if I wanted to add the magnifier icon next to “cerca nel sito”?

    • September 25, 2020 at 11:07 AM #5830
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Currently, there is no option to add a magnifier icon next to the text.

      • September 25, 2020 at 3:17 PM #5831
        Irene B.
        Participant
        • Topics: 1
        • Replies: 5

        Good to know, thank you!

        Thanks for your help. 5*!

      • September 25, 2020 at 3:58 PM #5832
        Irene B.
        Participant
        • Topics: 1
        • Replies: 5

        Sorry, one more thing that I can’t fix myself.

        When scrolling down my homepage, there’s no space in between the “cerca nel sito” and the borders of the box. How can I fix this?

        Thank you!

    • September 26, 2020 at 10:01 PM #5843
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Please also use the below custom CSS code to fix it.

      .menu-highlight:not(.header-fixed):not(.header-simple) #Header #Top_bar.is-sticky .menu > li.is-menu > a {
    padding: 5px 15px !important;
}
    • September 29, 2020 at 10:29 PM #5857
      Irene B.
      Participant
      • Topics: 1
      • Replies: 5

      Thank you! That works perfectly!

      I’ve got a few more questions, hope you can help – You deserve a 100* review!

      – How can I change the border radius of the search button in the pop-up? Right now there is an empty space between the search button and the search box.

      On Mobile:
      – I can’t properly see the AJAX search results on mobile (see screenshot). How can I fix this?
      – Can I change the font colour etc. for “cerca nel sito” on mobile?

      Thank you for your patience,
      Irene

      Attachments:
      You must be logged in to view attached files.
    • September 30, 2020 at 9:56 PM #5865
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      – How can I change the border radius of the search button in the pop-up? Right now there is an empty space between the search button and the search box.

      You can use the below CSS code to change.

      #is-popup-wrapper input.is-search-submit {
    border-radius: 0;
}

      On Mobile:
      – I can’t properly see the AJAX search results on mobile (see screenshot). How can I fix this?

      It displays fine for me as shown in the attached screenshot.

      Could you please try testing it multiple times?

      – Can I change the font colour etc. for “cerca nel sito” on mobile?

      You have to develop more custom CSS code to achieve this.

      Attachments:
      You must be logged in to view attached files.
  • Author
    Posts
Viewing 6 reply threads

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