-
Posts
-
There does seem be enough space next to or between logo and mobile menu trigger button to include the magnifying glass icon which normally triggers the search box.
I have seen this asked many times though there doesn’t appear to be universal solution.I think a good solution to this is to include a search button at the top of the mobile slide-out menu which can trigger the search form as it does in the non-mobile menu like below.
How can this be added?
Thank you for help on this<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown"> <a data-av_iconfont="entypo-fontello" data-av_icon="" aria-hidden="true" data-avia-search-tooltip=" <form action="http://www.kaua-i.com/" id="searchform" method="get" class="av_disable_ajax_search"> <div> <input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello" /> <input type="text" id="s" name="s" value="" placeholder='Search' /> </div> </form>" rel="nofollow" href="?s=" style="padding-right: 0px; padding-left: 13px; height: 88px; line-height: 88px;"></a> </li>Hi ttem!
Please refer to my post here- https://kriesi.at/support/topic/mobile-search-bar/#post-210112
Best regards,
YigitHi Yigit,
Yes, I checked that out. However that is not an suitable solution as it takes up quite a bit of screen real estate. Best to have it hidden and appear at the top the mobile slide-out menu. Maybe it could be triggered by the magnifying glass icon at the top of the slide-out menu?
Thanks for your help!
Hey!
For right now it isn’t something we can assist with adding into the mobile only menu. I’ll suggest it to Kriesi for a future update as a new feature.
If its a must-have I would suggest looking into a developer from either Microlancer or Codeable.
Cheers!
DevinHey ttem and anyone else interested,
I was actually looking for something similar, didn’t find much, and so I came up with my own solution. I didn’t want to add a search icon next to the mobile menu trigger just because I don’t think a little pop-up search form is great UI on mobile, so this works inside the mobile menu. Maybe in the future one of those “cover the header” or “slide down from the top” search forms could work, but to be honest, that’s too much work at the moment, and I’d prefer it if Kriesi just added more search form options or something. This method is quick and easy.
Since the advanced mobile menu is created on the fly with jQuery, and is nested in a z-index that makes forcing only a single element up from the regular header annoyingly difficult at best, I went with a simple jQuery solution, that can be put wherever (maybe just some plugin that places custom JS in the footer):
jQuery(window).load(function() { jQuery('#mobile-advanced').append('<li><form id="searchform" method="get"><div><input id="searchsubmit" class="button avia-font-entypo-fontello" type="submit" value=""></input><input id="s" type="text" placeholder="Search" value="" name="s" autocomplete="off"></input></div></form></li>'); });This places a form below your menu items in the mobile menu (you could also use prepend). Some caveats with this are all the IDs should be changed to something else (and then you’ll need to do some restyling), autocomplete is off because it acts a little weird for reasons I don’t care to figure out, and you’ll still have to do some styling like adding padding, but the code as is will work right away and look kind of okay.
- The topic ‘How to add search to mobile (smart phone width) slide-out menu?’ is closed to new replies.