Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 19, 2024 at 6:08 pm #1474018
    spooniverse

    Dear folks,

    I switch the Search Icon to a Search Field with a code I found in the forum:

    add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );

function avia_append_search_nav ( $items, $args ) {
	if(avia_get_option('header_searchicon','header_searchicon') != "header_searchicon") return $items;
    if ((is_object($args) && $args->theme_location == 'avia')||  (is_string($args) && $args = "fallback_menu")) {
       	global $avia_config;
       	ob_start();
		$getform = get_search_form(false);
       	$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown">'.$getform.'</li>';
	    }
   	return $items;
}

    Now my question is: Can I only do this change for a normal expanded menu and keep the Search Icon if the menu switches to the hamburger version? Is there a way to do this? With the code above the Search Field shows above 990px but when the menu changes and is displayed as hamburger, there is nothing. I would like to keep the Icon in this instance. Any help is appreciated. Thanks in advance!

    Kind regards, Daniel

    December 20, 2024 at 5:40 am #1474037
    Ismael

    Hey Daniel,

    Thank you for the inquiry.

    Did you manage to disable the default filters for the search icon? Is your modification working? If so, we can modify the function a bit to include the search icon again and make sure it only displays on mobile view using the available class names (e.g., av-desktop-hide, av-medium-hide, etc.) to control the visibility of elements on different screen sizes:

    add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );

function avia_append_search_nav($items, $args) {
    if (avia_get_option('header_searchicon', 'header_searchicon') != 'header_searchicon') {
        return $items;
    }

    if (avia_get_option('header_position', 'header_top') != 'header_top') {
        return $items;
    }

    if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args == 'fallback_menu')) {
        ob_start();
        $getform = get_search_form(false);  
        $getform = ob_get_clean();  

        $items .= '<li id="menu-item-search" class="av-medium-hide av-small-hide av-mini-hide menu-item menu-item-search-dropdown">' . $getform . '</li>';

        $items .= '<li id="menu-item-search-icon" class="menu-item menu-item-search-icon av-desktop-hide" role="menuitem">';
        $items .=    '<a aria-label="Search" href="?s=" ' . av_icon_string('search', false) . '>';
        $items .=        '<span class="avia_hidden_link_text">' . __('Search', 'avia_framework') . '</span>';
        $items .=    '</a>';
        $items .= '</li>';
    }

    return $items;
}

    Best regards,
    Ismael

    December 23, 2024 at 1:45 pm #1474182
    spooniverse

    Hi Ismael,

    your code is going in the right direction. Unfortunately, it does not yet work as desired. A search icon is added to the mobile menu at the end, which is not quite the behavior I want to achieve.

    Regarding your question: My code works. It comes here from your forum and I use it on several pages. It works as follows:

    Desktop: Search field instead of icon in the menu
    Mobile: Neither

    What I want to achieve:

    Desktop: Search field instead of icon in the menu (as with my code)
    Mobile: Magnifying glass icon next to the lines of the hamburger menu. So basically the same as it is in your standard.

    Can I change my code so that it only affects the normal menu (used for desktop) and the mobile menu remains unchanged? Perhaps that would be a simpler solution than defining something specially for the mobile. What do you think? Is there a corresponding restriction that I could use?

    Christmas greetings,
    Daniel

    December 25, 2024 at 7:24 am #1474245
    Ismael

    Hi,

    Thank you for the clarification.

    We modified the code a bit. Please try it again:

    
add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );

function avia_append_search_nav($items, $args) {
    if (avia_get_option('header_searchicon', 'header_searchicon') != 'header_searchicon') {
        return $items;
    }

    if (avia_get_option('header_position', 'header_top') != 'header_top') {
        return $items;
    }

    if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args == 'fallback_menu')) {
        ob_start();
	get_search_form( [ 'ajax_disable' => false ] );
	$form = ob_get_clean();

	$form = str_replace( '<form ', '<form role="search" ', $form );
	$form = htmlspecialchars( $form );

        $items .= '<li id="menu-item-search" class="av-medium-hide av-small-hide av-mini-hide menu-item menu-item-search-dropdown">' . $form . '</li>';

        $items .=	'<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special av-desktop-hide" role="menuitem">';
        $items .=		'<a aria-label="' . $aria_label . '" href="?s=" '. $nofollow . ' data-avia-search-tooltip="' . $form . '" ' . av_icon_string( 'search', false ) . '>';
        $items .=			'<span class="avia_hidden_link_text">' . __( 'Search', 'avia_framework' ) . '</span>';
        $items .=		'</a>';
        $items .=	'</li>';
    }

    return $items;
}

    Best regards,
    Ismael

    December 27, 2024 at 5:58 pm #1474305
    Guenni007

    or just – activate the option in main menue to show search icon ( this is the one for ajax search )

    and put this to your child-theme functions.php:

    
function add_search_to_main_menu($items, $args) {
    if ($args->theme_location == 'avia') { 
        $search_form = '<li id="menu-item-search-desktop" class="menu-item av-medium-hide av-small-hide av-mini-hide" role="menuitem">' . get_search_form(false) . '</li>';
        $items .= $search_form;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_search_to_main_menu', 10, 2);

    and this to quick css:

    #avia-menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#top #searchform > div {
  position: relative;
  max-width: 220px;
  opacity: 1 !important;
  display: block !important;
}
/*=== synchronise it with your hamburger breakpoint ===*/
@media only screen and (min-width: 990px) {
  #menu-item-search {
    display: none;
  }
}

    Advantage : Ajax Functionality is preserved for mobile case.
    see: https://enfold.webers-webdesign.de/

    PS: after you have seen the demo page, I will remove it again, because it disturbs other demos on the site.
    e.g. the one with left and right header layout

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