Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #277734

    Hey Everyone,

    I’ve been asked by my client to remove the search magnifying glass that is standard with the Enfold theme (that opens the pop-up AJAX search box below it) and instead just have a regular search box right in it’s place. I’m assuming this isn’t too difficult, but after a couple of hours of searching and sifting through the code, I figured maybe someone else could point me in the right direction?

    Here is the link to their site: http://instaglucose-com.web10.prepropagate.com

    Thanks for the help as always everyone!
    – John

    #278483

    Hi jnhaswell!

    Thank you for using the theme!

    You can add this on functions.php to remove the search icon and add the actual search form right after the main menu:

    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;
    	}

    Add this on Quick CSS or custom.css:

    #top #searchform > * {
    opacity: 1 !important;
    display: block !important;
    }

    Best regards,
    Ismael

    #279586

    Thanks so much Ismael!!

    I had one more question question related to this. I wanted to see how it would look with the text “Search” right next to the magnifying glass. Just wanted to give myself another option. What would be the best way to accomplish this?

    Best,
    John

    #279606

    I can see that “searchform.php” is where the code is stored, but I’m not a pro at editing PHP and continue to get syntax errors when trying to input anything. I believe I just want to add the text before $icon = av_icon_char(‘search’);

    #279800

    Hi!

    Thank you for the update.

    If you want the search text next to the magnifying glass. Just remove the suggested codes above then add this on Quick CSS:

    #menu-item-search [data-av_icon]:before {
    float: left;
    margin-right: 10px;
    }
    
    #top .avia_hidden_link_text {
    display: block;
    float: left;
    }

    Regards,
    Ismael

    #385435

    The above search bar in header via functions.php doesn’t work at all for me. I am using a child theme though if that’s the problem?

    Anyhow, I’ve gone with the search text option (with ‘search’ next to the icon), looks great, although the ‘search’ text isn’t linked like the icon?

    Any ideas?

    #385436
    This reply has been marked as private.
    #386014

    Hey!

    Looks like you’re using an old version of the theme. Please update the theme to 3.0.7.

    Cheers!
    Ismael

    #453930

    Hello, I would like to do the same thing here, add the word Search by the magnifying glass, which the code above works. But I have Woocommerce installed and it also displays the text “Shopping Cart” under my cart. Any way to keep the words search, but not have the words shopping cart displayed?

    Chris

    #453934

    Hi,

    Never mind, I figured this out using this code,

    #menu-item-search > a:nth-child(1) > span:nth-child(1) {
    display: block;
    float: left;
    }
    
    .span.avia_hidden_link_text:nth-child(3) {
    	display:none;
    }
    
    #menu-item-search [data-av_icon]:before {
    float: left;
    margin-right: 10px;
    }

    If there is a cleaner way to do it please let me know. Otherwise hope this helps someone else!

    Thank you,
    Chris

    #454279

    Hi!

    It looks clean enough and if it work it works :)

    Glad you got it fixed.

    Best regards,
    Rikard

    #460897

    Hello,

    I’ve just implemented the same fixed search input field using the above code, but i’m experiencing a bug whereby the field now jumps to the left when you hover over it. I think it’s something to do with the JS that expanded the original search field. Has anyone experienced this before?

    Regards

    Christian

    #461154

    Hey!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    #462078
    This reply has been marked as private.
    #462304

    Hi!

    What happens when you add this in the Quick CSS field?

    #menu-item-search {
      right: -50px !important;
    }

    Let us know.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.