Reposition Search Bar

Ivory Search › Forums › Support › Reposition Search Bar

Viewing 7 reply threads

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

  • Author
    Posts
    • March 21, 2020 at 5:12 AM #4181
      bikesorbicycles
      Participant
      • Topics: 1
      • Replies: 6

      Hi folks,

      Just got this plugin and love it. I have setup on http://www.bikesorbicycles.com I would like the search bar to appear on the right-hand side within the menu bar for browser. Currently it is below the menu.

      For mobile I would like it to apepar at the top of the nav menu above bikes. Currently it is at the bottom.

      Any help would be much appreciated.

      Thanks,

      Rory

    • March 21, 2020 at 9:28 AM #4182
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

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

      I would like the search bar to appear on the right-hand side within the menu bar for browser. Currently it is below the menu.

      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

      @media only screen and (min-width: 767px){
#header .is-menu form.is-search-form {
    max-width: 200px;
}

#header .is-menu form.is-search-form label {
    width: 72%;
}

#header .is-menu form.is-search-form input.is-search-input {
    max-width: 100%;
}

#header .is-menu form.is-search-form input.is-search-submit {
    padding: 7px 4px;
}
}

      For mobile I would like it to apepar at the top of the nav menu above bikes. Currently it is at the bottom.

      You can display it directly in the mobile header as described below.

      Display Search Form In Mobile Site Header

      Best regards,
      Ivory Search Support

      • March 22, 2020 at 5:59 AM #4190
        bikesorbicycles
        Participant
        • Topics: 1
        • Replies: 6

        Hey,

        It appears to be showing in mobile now cutting through logo. Be great if I can position below the header.

        Thanks!

      • March 22, 2020 at 7:03 AM #4191
        bikesorbicycles
        Participant
        • Topics: 1
        • Replies: 6

        Sorry for all the replies. I realise the search bar was not showing previously in mobile as I have to also enable the form in Header Search section, but this produces a second header search bar in desktop version that I do not want.

    • March 21, 2020 at 5:32 PM #4183
      bikesorbicycles
      Participant
      • Topics: 1
      • Replies: 6

      Thank you. That is amazing, worked a charm for browser!

      For mobile the search bar is appearing across header/logo as shown in attached. Is there a way to reposition it below logo?

      Thanks

    • March 21, 2020 at 5:32 PM #4184
      bikesorbicycles
      Participant
      • Topics: 1
      • Replies: 6

      Sorry, image attached now.

      Attachments:
      You must be logged in to view attached files.
    • March 21, 2020 at 8:45 PM #4186
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      For mobile the search bar is appearing across header/logo as shown in attached. Is there a way to reposition it below logo?

      Yes, we can reposition it by developing a custom CSS code.

      I visited your website on mobile but didn’t see it there so could you please display it in the header so that I can develop custom CSS code to reposition it?

      • March 21, 2020 at 9:37 PM #4189
        bikesorbicycles
        Participant
        • Topics: 1
        • Replies: 6

        I have enabled it in mobile header, but it doesn’t appear to be showing. I have tried with cache selected and without. It is showing as displaying in wordpress customiser, but on live site doesn’t appear to show.

    • March 22, 2020 at 9:02 AM #4192
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Please try clearing and temporarily deactivating the WP Rocket cache that you are using on your website.

      If it still does not display then would you mind if I log in to your site and do some troubleshooting? If this is ok then could you please temporarily share your site log in detail privately by checking the option “Set as private reply” when replying to this topic?

      • March 22, 2020 at 9:23 AM #4193
        bikesorbicycles
        Participant
        • Topics: 1
        • Replies: 6
        This reply has been marked as private.
    • March 23, 2020 at 12:27 PM #4203
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Please use below custom CSS code to reposition it on mobile.

      body > div.is-menu-wrapper {
    top: 86px;
    right: auto;
    left: 0;
}

body > div.is-menu-wrapper span.is-menu {
    float: left;
    margin-left: 10px;
}
    • March 23, 2020 at 8:41 PM #4209
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      Your whole custom CSS should be as below.

      body > div.is-menu-wrapper {
    top: 86px;
    right: auto;
    left: 0;
width: auto;
}

body > div.is-menu-wrapper span.is-menu {
    float: left;
    margin-left: 10px;
}

@media only screen and (min-width: 767px){
#header .is-menu form.is-search-form {
    max-width: 200px;
}

#header .is-menu form.is-search-form label {
    width: 72%;
}

#header .is-menu form.is-search-form input.is-search-input {
    max-width: 100%;
}

#header .is-menu form.is-search-form input.is-search-submit {
    padding: 7px 4px;
}
}
  • Author
    Posts
Viewing 7 reply threads

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