If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 19 posts - 1 through 19 (of 19 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

    #574810

    hello ismael im high jacking this post ive got a similar issue client wants search bar inside main navigation and a login button on the right…

    ive done what i can over the last couple weeks but cant get it just right the client is particular and wants the login and search bar to the right as laid out in the attached image help please :D

    #576024

    Hi!

    1. To avoid mixing up of the issues please create a new ticket so we can help you better.
    2. The person who created this thread will also be able to view the private content unless you want to move that too to a new ticket.
    3. Please provide a mockup where you want the search bar exactly and the login button.
    4. Please remove all customization you have made to the search bar and to add login buttons.
    5. Please keep the admin access open or create a new one for us and share in the private content.

    Once we get the above info wee will surely be able to help you better.

    Regards,
    Vinay

    #580530

    Hi Team and @ismael,

    is this solution ( http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out)(Purchase code hidden if logged out) -search-field/#post-278483 ) still compatible with enfold version 3.4.7?

    I have had many clients ask about replacing the magnifying glass in the menu with an actual search box many times, I just wanted to be sure this is the best documented way to still accomplish this before I head off and implement on several live sites.

    cheers.

    #581488

    Hi!

    @PRuuPH: Yes, you can still use the code.

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

    Adjust the position with this css:

    #top #searchform > * {
      opacity: 1 !important;
      display: block !important;
      top: 20px;
      margin-left: 20px;
    }
    

    It will require a few css modifications which depends on the site’s header settings.

    Regards,
    Ismael

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

You must be logged in to reply to this topic.