Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1328802

    Hi guys,

    I tried several approaches already listed here in the forum but they do not seem to work with current versions of enfold.

    How can I display the search on mobile with the latest enfold version?

    Best
    Elmar

    #1328806

    what kind of header do you have?
    do you want the search only on hamburger?

    #1328807

    Standard slim logo left with 45px custom height.

    #1328808

    sorry editing when you wrote your text:
    do you want the search only on hamburger?

    #1328810

    Go and activate the shortcode for search in child-theme functions.php

    add_shortcode('avia_search', 'get_search_form');
    

    then you can place an custom link to your menu by Navigation Label: [avia_search]
    maybe to select it easier give a custom class to that custom link.
    The rest is css

    #1328816

    Hm, maybe you got that wrong. I have search working. I *also* need it on mobile. Wouldn´t the custom link be visible all the time?

    #1328859

    but if you have that search on your main-navigation the magnifier symbol ( search ) is also on hamburger open visible !
    Maybe you only had to style the colors of that Search icon

    then you will not need anything else ? express your request a little more precisely.
    __________
    but if you want it like this: https://webers-web.info
    you can hide that custom link in your “non-hamburger” navigation by setting it to display none.
    Think of that custom class on that custom link:

    #avia-menu li.menu-search {
        display: none;
    }

    now we got a menu item search – to have the chance to write into that input field – the link on the item itself disturbs – we had to get rid of the href :
    this to child-theme functions.php:

    function remove_href_from_search_input(){
    ?>
    <script type="text/javascript">
    (function($) {
    	$('#header').on('click', '.av-main-nav-wrap', function() {
    			$('#av-burger-menu-ul .menu-search > a:first-of-type').removeAttr("href");
    	});	
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'remove_href_from_search_input');

    on my testinstallation i got this in my quick css – but you had to adjust it to your settings and needs:

    #avia-menu li.menu-search {
    	display: none;
    }
    
    #av-burger-menu-ul li.menu-search a:hover {
    	background-color: transparent !important;
    }
    
    #av-burger-menu-ul li.menu-search a:hover {
    	opacity: 1 !important
    }
    
    #av-burger-menu-ul li.menu-search .ajax_search_response {
    	margin-top: 30px !important;
    }
    
    #av-burger-menu-ul li.menu-search .ajax_search_response  * {
    	color: #fff;
    }
    
    #av-burger-menu-ul li.menu-search .ajax_search_response .av_ajax_search_content .av_ajax_search_title {
    	font-size: 16px
    }
    
    #av-burger-menu-ul li.menu-search .ajax_search_response  .av_ajax_search_entry:hover .av_ajax_search_title {
    	letter-spacing:0.4px;
    	color: #004e7f
    }
    
    #av-burger-menu-ul li.menu-search .av_ajax_search_image {
    	background-color: #fff;
    	border-radius: 0;
    	color: #000 !important
    }
    #1329024

    Hi,


    @Guenni007
    : Thank you for the solution. :)

    @Elmar: You can also try this script to create a search field inside the mobile menu container.

    // https://kriesi.at/support/topic/search-box-in-overlay-search-box/#post-1320840

    Best regards,
    Ismael

    #1329107

    Hi guys,

    thanks guys!

    Just for the record: here is complete instruction to make it work as I hate going through dozens of threads to search for the complete solution. You are welcome ;). The search form was hidden in my case.

    
    /* Mobile Search Form Magic */
    #top #searchform > div {
        display: block !important;
        opacity: 1 !important;
    }
    #avia-menu li.menu-search {
        display: none;
    }
    

    Functions.php

    
    /**
     * Show search bar on mobile menu
     */
     add_shortcode('avia_search', 'get_search_form');
    function ava_custom_script_mod_search_mobile()
    {
    ?>
    	<script>
    		(function($) {
    			$(document).ready(function() {		
    				var page   = window.location.href;
    				var search = '<form action="'+page+'" method="get" class=""><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>';
    	
    				$('.av-burger-menu-main a').on('click', function() {
    					if($(".av-mobile-search").find('form').length == 1) return;
    					setTimeout(() => {
    						$("<li class='av-mobile-search av-active-burger-items'>" + search + "</div>").insertAfter('.menu-item-178580');
    					}, 300);	
    				});
    			});
    		})(jQuery);
    	</script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script_mod_search_mobile', 10000);
    
    #1329175

    Hi,

    Great! Glad it is solved and thank you for sharing the magic.

    Have a nice day.

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Display search icon on mobile in burger flyout’ is closed to new replies.