Repositioning Search bar.

Ivory Search Forums Support Repositioning Search bar.

Viewing 25 reply threads

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

  • Author
    Posts
    • #3027
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello,

      Currently, the search bar is displaying below my menu at the bottom of my header. I have tried fixing this, but have been unable to get it to move.
      Can you please tell me how this can be achieved?

      Thank you,
      Jaime

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

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

      Where do you want to display it exactly?

      I visited your site and displays in the header for me as shown in the attached screenshot.

      If you want to display it at the end of the menu then please display it in the menu and I will help you to reposition it.

      Best regards,
      Ivory Search Support

      Attachments:
      You must be logged in to view attached files.
    • #3037
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello,

      Thank you for your response. I actually still want it in the header just to the right of the menu (right next to it) instead of above.

      Attached is a screenshot of where I would like to move it.

      Thank you,
      Jaime

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

      As said above, If you want to display it at the end of the menu then please display it on the menu and I will help you to reposition it.

      You can display it on the menu and remove it from the header as described in the below pages.

      Display Search Form In Menu

      Display Search Form In Site Header

    • #3045
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      I added a search section in the menu.

      My Ivory setting screen looks different than yours. Please see screenshots attached.

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

      You have not added it in the Menu but in your site header.

      Please remove it from your site header and add it to the menu as shown in the attached screenshots.

      Attachments:
      You must be logged in to view attached files.
    • #3052
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Ok, thank you for the screenshots. I have made the requested changes. Are you able to tell me how to move the search bar to the right side of the header now?

      Thank you,

      Jaime

    • #3057
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      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

      
      li.is-menu {
          display: inline-block;
          vertical-align: text-bottom;
      }
      
      li.is-menu .search-form input[type="search"] {
          padding-top: 5px;
          padding-bottom: 5px;
          width: 200px;
          float: left;
      }
      
      li.is-menu input.search-form-submit {
          margin-top: 0;
      }
      
      nav#genesis-nav-primary {
          width: auto;
      }
      
    • #3063
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Thank you so much for your help! That did work! I just need to move it over to the right a little more. Where would I add the code in for this? I tried adding this to the CSS code in the Ivory settings, but it did not seem to work.

      form .is-link-container div {
      position: absolute;
      width: 200px;
      bottom: -25px;
      right: 25px;
      z-index: 99999;
      height: auto;
      line-height: 14px;
      padding: 10px 15px;
      }

      Thank you so much for all of your help.

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

      You can move it to the right using below CSS code.

      li.is-menu {
          margin-left: 25px;
      }
    • #3119
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello,

      The above code did not work for moving the search bar. Can you also tell me how to change the button color? I have changed all the other buttons on the site, but this one will not change.

      Thank you!

    • #3124
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

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

    • #3126
      Jaime
      Participant
      • Topics: 1
      • Replies: 12
    • #3135
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      You can change the button color using below CSS code.

      li.is-menu input.search-form-submit {
          background-color: #018ABE;
      }
    • #3143
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Thank you that did work for changing the color. I still need to mover the search bar over to right side of the header.

      This code did not work:
      li.is-menu {
      margin-left: 25px;
      }

      Additionally, the button is not aligned with the bottom of the search input field. Is there a way to do this?

    • #3161
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      I still need to mover the search bar over to right side of the header.

      This code did not work:
      li.is-menu {
      margin-left: 25px;
      }

      I can see that code is working on your site.

      Just increase the value 25 in the above code to move it more to the right side of the header.

      Additionally, the button is not aligned with the bottom of the search input field. Is there a way to do this?

      Please use below CSS code to align the button.

      li.is-menu input.search-form-submit {
          padding: 13px 20px;
      }
    • #3235
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello again,

      I am still having trouble moving the search bar to the right more.

      I even increased the margin-left to 50px and it did not move.

      Here is the code I was told to change.

      li.is-menu {
      margin-left: 25px;
      }

    • #3248
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      I tried to access your shared site to troubleshoot it but it is just displaying the message “Get Ready… Something Really Cool Is Coming Soon”.

      Would you mind if I log in to your site and access it? If this is ok then could you please temporary share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

    • #3254
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello,

      I disabled the coming soon message. You can view it now. Thank you!

      Sincerely,
      Jaime

    • #3258
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      I visited your site and saw you are using wrong code as following

      li.is-menu {
          margin-left: 100px important!;
      }

      instead, it should be as below.

      li.is-menu {
          margin-left: 100px !important;
      }
    • #3290
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hi,

      I updated the code and it still is not working. Changing the px does not move the search bar.

      I would like to have it on the far right almost to the border of the header.

    • #3291
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      I can see that the search form on your site is moved to the right side of the header as shown in the attached screenshot.

      Please test it clearing your browser cache.

      Attachments:
      You must be logged in to view attached files.
    • #3300
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Hello, it is not my cache. I even had someone in a different city on a different network and computer view this site and the search bar is not over all the way to the right. I am not sure how you got it that way in your picture, but that is not how it is.

      Can you please provide the code needed to move it over.

      Thank you,
      Jaime

    • #3301
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,750

      I have already provided you the CSS code above to achieve it and it is displaying fine for me.

      Could you please share with me the screenshot of how it is displaying for you?

      Also, please try using a different browser.

    • #3315
      Jaime
      Participant
      • Topics: 1
      • Replies: 12

      Here is the screenshot. I have had other people on different computers view the site and their view is the same as mine.

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

      I understood the issue now that it displays differently on different screen resolutions.

      You have to make the changes in the theme header.php file by contacting your Infinity Pro theme author to display it on the right side of your website header.

Viewing 25 reply threads

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