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

    Hello there. I am trying to add the search icon (with its associated search form) right next to the burger menu icon. I have found the function avia_append_burger_menu and have redefined it in my child theme. I can confirm the search icon’s html is added properly by sending it to debug.log yet it never shows up next to the burger menu icon. Moreover, it seems it’s added to the inside of the burger menu instead of right next to the burger menu icon. I have no idea what is going on.

    Here is the redefined avia_append_burger_menu function:

    /* Append the burger menu */
    if(!function_exists('avia_append_burger_menu'))
    {
    	//first append search item to main menu
    	add_filter( 'wp_nav_menu_items', 'avia_append_burger_menu', 9998, 2 );
    	add_filter( 'avf_fallback_menu_items', 'avia_append_burger_menu', 9998, 2 );
    
    	function avia_append_burger_menu ( $items , $args )
    	{	
    		global $avia_config;
    		
    		$location = ( is_object( $args ) && isset( $args->theme_location ) ) ? $args->theme_location : '';
    		$original_location = isset( $avia_config['current_menu_location_output'] ) ? $avia_config['current_menu_location_output'] : '';	
    		
    		/**
    		 * Allow compatibility with plugins that change menu or third party plugins to manpulate the location
    		 * 
    		 * @used_by Enfold config-menu-exchange\config.php			10
    		 * @since 4.1.3
    		 */
    		$location = apply_filters( 'avf_append_burger_menu_location', $location, $original_location, $items , $args );
    		
    	    if( ( is_object( $args ) && ( $location == 'avia' ) ) || ( is_string( $args ) && ( $args == "fallback_menu" ) ) ) {
    	        $class = avia_get_option('burger_size');
    	        
    	        $items .= '<li class="av-burger-menu-main menu-item-avia-special '.$class.'">
    	        			<a href="#">
    							<span class="av-hamburger av-hamburger--spin av-js-hamburger">
    					        <span class="av-hamburger-box">
    						          <span class="av-hamburger-inner"></span>
    						          <strong>'.__('Menu','avia_framework').'</strong>
    					        </span>
    							</span>
    						</a>
    	        		   </li>';
    
    			// Utilisation de la fonction maison définie ci-haut.
    			$items = avia_append_search_nav( $items, $args );
    	    }
    
    	    return $items;
    	}
    }

    Since it uses our redefined avia_append_search_nav function, here it is as well:

    if(!function_exists('avia_append_search_nav'))
    {
    	// Remove from its usual position
    	remove_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
    	remove_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 );
    
    	function avia_append_search_nav ( $items, $args = null ) {
    		global $avia_config;
    		ob_start();
    		get_search_form();
    		$form =  htmlspecialchars(ob_get_clean()) ;
    
    		$items .= '<li id="menu-item-search" class="menu-item menu-item-search-dropdown">
    						<a href="?s=" rel="nofollow"><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
    				   </li>';
    
    	    return $items;
    	}
    }

    Any help is appreciated. Thanks!

    • This topic was modified 3 years, 2 months ago by Technoh. Reason: Again, better code formatting
    #1269839

    Hey Technoh,
    Sorry for the late reply, thanks for sharing your code, but the theme already places the search icon and form next to the burger menu when it is enabled:
    2020-12-26_164258.jpg
    at Enfold Theme Options > Main Menu > Append search icon to main menu
    So perhaps because you have this option disabled, when you try adding it though your theme edits the same classes are used and it doesn’t show due to the css from the theme option.
    Please try using the theme option instead.

    Best regards,
    Mike

    #1270249

    Hello Mike,

    Thanks for replying. I checked the theme settings and the option is active. The search box is added to the social icons section and this section was hidden. I have modified the CSS code and the search icon is now displayed correctly. However, when clicking on it (ON MOBILE ONLY) the search bar is not displayed properly and it becomes extremely difficult to search. The search button is available but clicking where the text input should be actually clicks on the logo, bringing the user to the site’s front page, or on the burger menu, opening it.

    Could you look at the site and give me the appropriate CSS code in order to display the search box in its correct position?

    Thanks!

    #1270391

    Hi,
    Thanks for the feedback, I see for mobile the social icons and the search icon are not displaying, are you still using your custom functions above? Please try removing this and update the Enfold theme, as you are using version 4.6.2 which is quite old now and contained many errors that have now been corrected in the current version 4.7.6.4

    Best regards,
    Mike

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