Adding Search to the Header Secondary Menu - Support | Kriesi.at

Tagged: search, secondary menu

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

Author

Posts
July 24, 2018 at 3:59 pm #989236

NicomIT
Participant

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

July 25, 2018 at 8:47 am #989545
Ismael
Moderator
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
July 25, 2018 at 4:10 pm #989769
NicomIT
Participant
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:
- This reply was modified 6 years, 5 months ago by NicomIT.
July 26, 2018 at 7:29 am #990084

Ismael
Moderator

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

July 27, 2018 at 2:50 pm #990735

NicomIT
Participant

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:

I included the URL for the website in the private info if you want to have a look at it in your browser.

July 30, 2018 at 4:23 am #991362

Ismael
Moderator

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

July 30, 2018 at 3:26 pm #991543

NicomIT
Participant

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

July 31, 2018 at 8:53 am #991831

Ismael
Moderator

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

July 31, 2018 at 2:53 pm #991948

NicomIT
Participant

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

July 31, 2018 at 3:41 pm #991961
Guenni007
Participant
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 6 years, 4 months ago by Guenni007.
July 31, 2018 at 4:16 pm #991973

Guenni007
Participant

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

August 1, 2018 at 7:32 am #992203

Ismael
Moderator

Hi,

Thanks @guenni007!

Please try the suggestion above. :)

Best regards,
Ismael

August 1, 2018 at 8:10 am #992235

Guenni007
Participant

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.

August 1, 2018 at 3:41 pm #992451

NicomIT
Participant

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.

August 2, 2018 at 5:34 am #992686
Ismael
Moderator
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
August 8, 2018 at 4:49 pm #995062
NicomIT
Participant
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 6 years, 4 months ago by NicomIT.
August 9, 2018 at 9:06 am #995306
Ismael
Moderator
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
August 9, 2018 at 4:05 pm #995559

NicomIT
Participant

Awesome! Thanks for the help Ismael.

August 10, 2018 at 8:39 am #995851

Ismael
Moderator

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
Author

Posts

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

You must be logged in to reply to this topic.