Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 23, 2015 at 11:40 am #477632
    SwitzerBaden

    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?

    July 25, 2015 at 6:44 am #478564
    Ismael

    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

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