Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #942728

    We’d like to have a way to show a search box or the icon in the mobile hamburger menu as currently the search icon to the left of the hamburger menu is way too close to the site logo.

    I’ve found lots of questions on this in the forums, but none of the solutions seemed to work for me. Can you recommend a solution?

    Thanks!

    #942982

    Hey pgsmarketing,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #943135

    The site is: https://devdep.phoenixgate.ca/ – this is our development site. I’ve hidden the search icon on mobile, FYI. I can unhide it as needed.

    #943960

    Hi,

    Thank you for the info.

    We need to include a placeholder for the search form inside the mobile menu. Add this code in the functions.php file.

    add_filter( 'wp_nav_menu_items', 'avf_add_search', 9999, 2 );
    function avf_add_search( $items, $args ) {
    	if ($args->theme_location == 'avia')
    	{
    		$search = '<li id="menu-item-search-mobile" class="menu-item"></li>';
    		$items = $search . $items;
    	}
    	return $items;
    }

    And then dynamically create the search form and append it to the mobile search container.

    add_action('wp_footer', 'avf_add_search_script');
    function avf_add_search_script(){
    ?>
    <script type="text/javascript">
    (function($) {
    	$('.av-burger-menu-main').on('click', function() {
    		var page   = window.location.href;
    		var mobile = $('.menu-item-search-mobile');
    		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>';
    
    		setTimeout(function() {
    			if(mobile.find('form').length == 1) return;
    			mobile.html(search);
    		}, 500);		
    	});
    })(jQuery);
    </script>
    <?php
    }

    Lastly, add this code in the Quick CSS field.

    #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile {
      padding: 0 30px;
      position: relative !important;
    }
    
    #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.menu-item-search-mobile form {
      position: relative !important;
    }
    

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.