Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #989236

    Is it possible to add the site search to the end of the header secondary menu?

    #989545

    Hey NicomIT,

    Thank you for using Enfold.

    You can use the “wp_nav_menu_items” filter in the functions.php file to append the search icon to the secondary 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 ((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-search2" class="noMobile menu-item menu-item-search-dropdown">'.$form.'</span> ';
    	}
    	return $items;
    }

    Best regards,
    Ismael

    #989769

    Thanks Ismael. Am I correct to assume I need to check off “Append search icon to main menu” after adding the code? If so, I did that but this code is displaying now in the header:

    a href=”?s=” rel=”nofollow”>

    Just in case this make a difference, there is a WPML language switcher link right after the secondary menu and it’s right after that where I need to add the search.

    Is it also possible to display the actual search field/button instead of just the search icon? See below:

    Search Example 01

    Search Example 02

    • This reply was modified 5 years, 12 months ago by NicomIT.
    #990084

    Hey!

    Thanks for the update.

    There’s a few syntax errors in the code. I adjusted it a bit. Please try it again. :)

    Best regards,
    Ismael

    #990735

    Thanks Ismael. The broken code isn’t displaying now. But instead of the search displaying, I only see an extra I after the language switcher link. See the yellow highlighted area in this screenshot:
    Search Screenshot
    I included the URL for the website in the private info if you want to have a look at it in your browser.

    #991362

    Hi,

    Thanks for the update.

    I adjusted the code a bit. Please try it again. If it’s still not working, post the login details in the private field so that we can test it.

    Best regards,
    Ismael

    #991543

    Hi Ismael,
    It looks like that didn’t work. I set-up a login for you and the details are in the private info.

    #991831

    Hi,

    Thanks for the update. It says that the password has expired. Please generate another password and then post it again here.

    Best regards,
    Ismael

    #991948

    Hi Ismael,
    I’m assuming you are referring to the WordPress admin/dashboard login? If so, I reset the password and included it below.

    #991961

    it is not so hard to insert that little icon for search on that place but to have the direct form there is a bit more complex.

    don’t know why$form = (ob_get_clean()) ; has to be and not $form = htmlspecialchars(ob_get_clean()) ; stays a miracle :lol

    so try ismaels code without that htmlspecialchars

    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 ((is_object($args) && $args->theme_location == 'avia2') || (is_string($args) && $args = "fallback_menu"))
    	{
    		global $avia_config;
    		ob_start();
    		get_search_form();
    		$form =  (ob_get_clean()) ;
    
    		$items .= '<li id="menu-item-search2" class="noMobile menu-item menu-item-search-dropdown">'.$form.'</span> ';
    	}
    	return $items;
    }

    add this to your quick css:

    #avia2-menu #menu-item-search2 {
        vertical-align: top !important;
        position: relative;
        top: -12px;
    }

    but the uggliest thing is that the created ajax search will resize the header meta
    edit:

    #top #searchform .ajax_search_response {
        position: absolute;
        background-color: #fff;
        box-shadow: 2px 2px 6px #333;
    }
    • This reply was modified 5 years, 11 months ago by Guenni007.
    #991973

    my definitive advice – take the little magnifying glass icon instead.

    #992203

    Hi,

    Thanks @guenni007!

    Please try the suggestion above. :)

    Best regards,
    Ismael

    #992235

    by the way you can see a test environment on https://webers-testseite.de/cynthia
    another problem to solve is, if you want to discard the ajax results, you would normally click outside the results field.
    It doesn’t work here. So that will be the next hurdle.

    #992451

    Thanks for the help with that @guenni007. That worked great and he search is showing up now, only it’s over top of the secondary menu and not displaying right after it. But I’ll have a look at that to see what may be causing it.

    I’m still going to look at replacing the magnifying glass to keep things consistent with the design I have been provided by our client.

    #992686

    Hi,

    Glad it worked. Use this css code to adjust the position of the search form.

    #top #header_meta .sub_menu {
        left: -300px;
    }
    
    #avia2-menu #menu-item-search2 {
        top: -25px;
        right: -260px;
    }

    Best regards,
    Ismael

    #995062

    Thanks Ismael. I added that CSS and the search field is showing up right after the secondary menu now.

    Are you aware of an easy way to change the magnifying glass to a button?

    • This reply was modified 5 years, 11 months ago by NicomIT.
    #995306

    Hi,

    Thanks for the update.

    You have to modify the searchform.php file inside the theme folder. Look for this line.

    <input type="submit" value="<?php echo $icon; ?>" id="searchsubmit" class="button <?php echo $class; ?>" />
    		<input type="text" id="s" name="<?php echo $search_params['search_id']; ?>" value="<?php if(!empty($_GET['s'])) echo get_search_query(); ?>" placeholder='<?php echo $search_params['placeholder']; ?>' />

    The input value is set to an icon by default. You can change that to a text or something else.

    Best regards,
    Ismael

    #995559

    Awesome! Thanks for the help Ismael.

    #995851

    Hi,

    Great! Glad we could help!

    Please don’t forget to bookmark Enfold Documentation for future reference.
    And take a moment to review our theme and show your support when you have the time. https://themeforest.net/downloads

    Thank you for using Enfold :)

    Best regards,
    Ismael

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