Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 23, 2015 at 2:15 pm #507777
    Fran

    Hi Enfold-Team,

    I added a search bar next to the header by following the steps provided in this forum. It looks nice where it’s at, but it doesn’t work quite like I want it to.
    After typing in a term the “Instant Search +”-Plugin results show up – this is great!
    But underneath this box the standard search results load as well. How can I disable those results from showing up?

    Thanks for your help!

    Regards,
    Robin

    September 23, 2015 at 3:01 pm #507840
    Elliott

    Hey filamentworld!

    Try adding this to your custom CSS.

    .ajax_search_response { display: none !important; }

    Cheers!
    Elliott

    September 23, 2015 at 3:21 pm #507881
    Fran

    HI Elliot,

    great! Thank you very much. :)

    One more question: the search bar doesn’t adapt well on mobile screens/tablets. Do you have any css hacks for that as well?

    Thanks and have a nice day!

    Robin

    September 23, 2015 at 3:43 pm #507907
    Elliott

    Hey!

    Try adding this.

    .ui-autocomplete {
    max-width: 300px;
}

    It’s width is set via javascript I think but it seems to look ok when I set a max-width.

    Cheers!
    Elliott

    • This reply was modified 9 years, 3 months ago by Elliott.
    September 23, 2015 at 4:18 pm #507956
    Fran

    Hi Elliot,

    thanks again for your quick solution.
    It worked, but I also resized the logo to not be covered by the menu and now it’s not displaying correctly again. :/

    Could you help me one last time?

    thanks!

    September 23, 2015 at 4:22 pm #507965
    Elliott

    Hey!

    Did you remove it? I don’t see it anymore.

    Add it back in and set it to 250px or something smaller.

    .ui-autocomplete {
    max-width: 250px;
}

    Regards,
    Elliott

    September 29, 2015 at 6:01 pm #510897
    Fran

    Hi Elliot,

    I added it again to my child style.css , but nothing changed…

    Cheers,

    Robin

    September 30, 2015 at 10:46 am #511300
    Andy

    Hi!

    I don’t know how you want your search bar to look like, but try this code in Quick CSS field to control it’s position: 

    @media only screen and (max-width: 767px) {
input#s {
left: -200px;
margin-top: 28px !important;
margin-bottom: 10px !important;
}}

    Best regards,
    Andy

    September 30, 2015 at 3:21 pm #511569
    Fran

    Hi Andy,

    thank you very much. I adjusted the “Left:” value and now it looks perfect on mobile in portait mode. :)
    On tablet it looks fine in landscape mode.

    Mobile in landscape and tablet in portrait mode is still not perfect.
    If you have a quick fix for this as well, let me know.

    Thanks and have a nice day,

    Robin

    October 1, 2015 at 12:48 pm #512113
    Andy

    Hi!

    check out these media queries for different devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.