Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #943637

    Hello,

    I was wondering if it is possible on the mobile view to have a phone icon that would display to the left on the burger icon.

    Thanks!

    #944398

    Hey Pappasdg,

    Thank you for using Enfold.

    Yes, this is possible. Use the “wp_nav_menu_items” filter to append more items to the menu.

    /* Phone Icon */
    if(!function_exists('avia_append_phone_icon'))
    {
    	//first append search item to main menu
    	add_filter( 'wp_nav_menu_items', 'avia_append_phone_icon', 9997, 2 );
    	add_filter( 'avf_fallback_menu_items', 'avia_append_phone_icon', 9997, 2 );
    
    	function avia_append_phone_icon( $items, $args )
    	{		
    	    if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu"))
    	    {
    	        $items .= '<li id="menu-item-phone" class="noMobile menu-item menu-phone menu-item-avia-special">
    							<a href="#" '.av_icon_string('phone').'><span class="avia_hidden_link_text">'.__('Phone','avia_framework').'</span></a>
    	        		   </li>';
    	    }
    	    return $items;
    	}
    }
    
    function avf_default_icons_mod($icons) {
    	$icons['phone']	= array( 'font' =>'entypo-fontello', 'icon' => 'ue854');
    	return $icons;
    }
    add_filter('avf_default_icons','avf_default_icons_mod', 10, 1);

    This code is based on the ajax search icon.

    Best regards,
    Ismael

    #1142932

    I’ve tried this, but for some reason doesn’t seem to work. Am I doing something wrong?

    #1143211

    Hi,
    I tested the code above and found it to work correctly:
    2019-09-29-223552
    Please include an admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    #1240660

    hi!

    could you explain how would you have to modify this code to show the icon on desktop AND mobile?

    thank you!

    chris

    #1241565

    Hi,
    Please try this function instead:

    if(!function_exists('avia_append_phone_icon'))
    {
    	//first append search item to main menu
    	add_filter( 'wp_nav_menu_items', 'avia_append_phone_icon', 9997, 2 );
    	add_filter( 'avf_fallback_menu_items', 'avia_append_phone_icon', 9997, 2 );
    
    	function avia_append_phone_icon( $items, $args )
    	{		
    	    if ((is_object($args) && $args->theme_location == 'avia'))
    	    {
    	        $items .= '<li id="menu-item-phone" class="noMobile menu-item menu-phone menu-item-avia-special">
    							<a href="#" '.av_icon_string('phone').'><span class="avia_hidden_link_text">'.__('Phone','avia_framework').'</span></a>
    	        		   </li>';
    	    }
    	    return $items;
    	}
    }
    
    function avf_default_icons_mod($icons) {
    	$icons['phone']	= array( 'font' =>'entypo-fontello', 'icon' => 'ue854');
    	return $icons;
    }
    add_filter('avf_default_icons','avf_default_icons_mod', 10, 1);

    Best regards,
    Mike

    #1241613

    hi!

    thanks but the icon isn’t showing… ;-(

    regards,

    chris

    #1241847

    Hi,
    Thank you for the login, I added this css in your Quick CSS:

    .html_burger_menu_active #header .avia-menu #menu-item-phone {
    	display: block !important;
    }
    #menu-item-phone a:before {
    	 font-size: 35px;
    }

    Please adjust the font to suit, if needed, and then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    #1241889

    thanks alot, this works great.

    have a nice sunday!

    #1241896

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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

The topic ‘Add Phone Icon Next Burger Menu Icon on Mobile’ is closed to new replies.