Tagged: , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 31, 2015 at 12:00 am #452094
    BeeCee

    Hi,

    how can I move the search icon to the right of the social media icons, instead of being in the main menu?

    Header Layout:
    Logo left, menu right
    Custom height: 115 px

    Header Extra Elements:
    Header Social Icons: display in top bar at the right
    Secondary menu in top bar left

    Thank you.

    May 31, 2015 at 4:09 am #452113
    Josue

    Hey!

    Try adding this at the very end of your theme / child theme functions.php file:

    if(!function_exists('avia_append_search_nav'))
{
	//first append search item to main menu
	add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
	add_filter( 'avf_fallback_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 == 'avia2') || (is_string($args) && $args = "fallback_menu"))
	    {
	        global $avia_config;
	        ob_start();
	        get_search_form();
	        $form =  htmlspecialchars(ob_get_clean()) ;

	        $items .= '<li id="menu-item-search" class="noMobile 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>
	        		   </li>';
	    }
	    return $items;
	}
}

    Cheers!
    Josue

    May 31, 2015 at 6:05 pm #452265
    BeeCee

    Thanks a lot, but now the search icon is with your code snippet part of the SUBMENU (at the LEFT) and not part of the social icons (at the RIGHT):

    http://screencloud.net/v/p9du

    See screenshot (see my header settings of ENFOLD above):

    The color markers in my screenshot mean:

    RED = search icon is with your code at the right (and therefor part) of the SUBMENU items – see Firebug code in the screenshot
    ORANGE = my whole sub menu
    GREEN = where the search icon should be ==> at the right side of the social icons part

    Any idea?
    Thanks.

    May 31, 2015 at 7:53 pm #452276
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    May 31, 2015 at 9:28 pm #452284
    BeeCee

    The website is still in maintenance mode, I cannot go online for the moment. What do you want to know in detail please, perhaps I can check for myself?

    June 1, 2015 at 5:20 am #452324
    Josue

    Hi,

    Try adding this at the very end of your theme / child theme functions.php file:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).load(function() {
    	$(".social_bookmarks").append($("#menu-item-search").detach());
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    And this to Quick CSS / style.css:

    li#menu-item-search a {
    line-height: 32px !important;
    height: auto !important;
}

    Regards,
    Josue

    June 1, 2015 at 2:53 pm #452559
    BeeCee

    Your new code snippet is working now in that way, that now the search icon is at the right side of the social icons.

    BUT:
    the search results turned out weird.

    With your first part of code mentioned above, the search results turned out this way:
    https://screencloud.net/v/8mRT

    But with your second part of code, the icon is next to the social icons, which is okay now, but the search results in the popup are strange:
    http://screencloud.net/v/xj5X

    Any idea please?
    Thank you.

    June 1, 2015 at 11:05 pm #452826
    Josue

    Add this to your custom CSS:

    #top .ajax_search_response a.ajax_search_entry {
    display: block;
    text-decoration: none;
    line-height: 1.4em;
    font-size: 12px;
    height: auto;
    padding: 10px 16px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    clear: both;
    overflow: hidden;
    float: none;
    width: auto;
    text-align: left;
}

    Best regards,
    Josue

    June 2, 2015 at 1:50 pm #453126
    BeeCee

    So great, thank you very much, Josue, for your help, very kind of you! Works perfectly.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Search Icon to the right of social media icons instead in main menu?’ is closed to new replies.