Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 4, 2017 at 12:49 pm #787764
    orangeamps

    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 #787874
    Victoria

    Hey 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,
    Victoria

    May 4, 2017 at 3:53 pm #787892
    orangeamps

    OK thanks Victoria, I’ll have another go after disabling our cache.

    May 5, 2017 at 6:11 am #788194
    Rikard

    Hi,

    Ok, thanks for the feedback. Let us know how you get on with it.

    Best regards,
    Rikard

    May 5, 2017 at 10:55 am #788300
    orangeamps

    So 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-431521

    However, none of them worked or did anything to our website. Any advice/help on how to do this?

    • This reply was modified 7 years, 7 months ago by orangeamps.
    May 7, 2017 at 6:30 pm #789129
    Victoria

    Hi 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,
    Victoria

    August 1, 2017 at 11:48 am #832779
    agilecic

    Hi,

    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 #834599
    Ismael

    Hi,

    Please upgrade to version 4.1.2. The search icon will be displayed on mobile by default.

    Best regards,
    Ismael

    August 5, 2017 at 7:14 am #834611
    Ismael

    Hi,

    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

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