-
AuthorPosts
-
May 4, 2017 at 12:49 pm #787764
Hey there,
I’ve been trying (and failing!) to add a search icon to the hamburger/mobile menu of our website. Ideally it would work like the desktop version… opening the menu has the search icon centred at the top of the menu and clicking the search icon opens an AJAX field where you can search for things and see results appear as you type (so the same functionality as our desktop AJAX search). However anything close to this scenario is fine – even if it’s just a search icon.
I’ve tried lots of the recent fixes other people on this forum have suggested but with no success… well I did manage to get a search form added to the mobile menu, however that also removed the search icon from the desktop version of the menu and I’m looking for an icon to be added that brings up the AJAX form when tapped on.
It’s worth mentioning that I’ve added code to remove the ‘wc-get-fragments’ and the woocommerce cart from loading for performance reasons and we’re also using an Enfold Child theme.
May 4, 2017 at 3:38 pm #787874Hey Charlie,
The solutions did not seem to work, because or caching. There are errors in cached Javascript. You can disable cache, get any solution to work and then enable caching again.
If you need further assistance please let us know.
Best regards,
VictoriaMay 4, 2017 at 3:53 pm #787892OK thanks Victoria, I’ll have another go after disabling our cache.
May 5, 2017 at 6:11 am #788194Hi,
Ok, thanks for the feedback. Let us know how you get on with it.
Best regards,
RikardMay 5, 2017 at 10:55 am #788300So put Cloudflare in ‘development mode’ and disabled the cache plugin we use (WP Rocket) and tried these solutions below:
https://kriesi.at/support/topic/search-button-on-mobile/#post-748090
kriesi.at/support/topic/icon-suche-fehlt-in-der-mobilen-ansicht
https://kriesi.at/support/topic/search-button-on-mobile/#post-431521However, none of them worked or did anything to our website. Any advice/help on how to do this?
- This reply was modified 7 years, 6 months ago by orangeamps.
May 7, 2017 at 6:30 pm #789129Hi orangeamps,
I put the code fro the first link to you minified css file and the search icon appeared. It’s not in hamburger menu, but next to it. Screen shot in private. Is this not acceptable for you? All you have to do is adjust it to look how you need it.
Best regards,
VictoriaAugust 1, 2017 at 11:48 am #832779Hi,
I’d like to have the search icon appear inside the burger menu (ideally at the end of the list) , not next to it.
Can you help me do this? Even if it isn’t the magnify icon but the search field.
Thanks.August 5, 2017 at 6:41 am #834599Hi,
Please upgrade to version 4.1.2. The search icon will be displayed on mobile by default.
Best regards,
IsmaelAugust 5, 2017 at 7:14 am #834611Hi,
OR add this in the functions.php file.
// redirect mailchimp function ava_custom_script_mod(){ ?> <script> (function($){ function a() { if($('.av-active-search').length) return; var clone = $('#menu-item-search').clone(); var search = $(clone); search.removeClass('noMobile menu-item menu-item-search-dropdown menu-item-avia-special').addClass('av-active-burger-items av-active-search').removeAttr('id'); setTimeout(function() { $('#top #wrap_all #header #av-burger-menu-ul').append(search); console.log('test'); }, 200); } $('#header').on('mousedown', '.main_menu', function() { a(); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod');
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.