Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #477632

    There are a number of posts dealing with adding the search icon back into mobile views. However they all seem to deal with adjusting the CSS for mobile views.

    I would rather like to hook a ‘mobile specific’ search icon that will display next to the burger menu, or better yet simply add ‘search’ as an item in only the responsive menu. Has anyone accomplished something like this before?

    #478564

    Hi Switzer!

    Thank you for using Enfold.

    You can try this in the functions.php file:

    add_filter( 'ava_main_header', 'avia_append_search_nav_mod', 10);
    
    function avia_append_search_nav_mod()
    {
        ob_start();
        get_search_form();
        $form =  htmlspecialchars(ob_get_clean()) ;
    	
        $items = '<div id="menu-item-search-mod" class="menu-item-search-mod menu-item menu-item-search-dropdown">
            <a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
               </div>';
    
        echo $items;
    }

    Add this in the Quick CSS field:

    #menu-item-search-mod {
      display: block;
      position: absolute;
      right: 30%;
      top: 30%;
      z-index: 1000;
    }
    
    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
    	#menu-item-search-mod { display: none; }
    }

    Regards,
    Ismael

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