Need search box right of the main menu – how? - Support | Kriesi.at

Tagged: search, search box, search field

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

Author

Posts
June 16, 2019 at 12:48 pm #1110785

coolicious
Participant

Hey guys,

this question is often asked here in the forum but all the solutions dont work for me – maybe because they are some years old?
Do you have a solution for me which is compatible with the current version? I need a solution for a search box next to my menu like this:

Thank you!

June 17, 2019 at 4:39 am #1110899

Rikard
Keymaster

Hey coolicious,

Thanks for the screenshot, could you post a link to your actual site as well so that we can have a closer look please?

Best regards,
Rikard

June 17, 2019 at 8:31 am #1110944
coolicious
Participant
Hey Rikard,

that is not possible because I work with a local stage version :/ Maybe it helps if I say you that I use the following Demo Template as the base – the problem with the search box should be the same:
https://i.ibb.co/nsFQYNg/Bildschirmfoto-2019-06-17-um-08-29-53.png

Thank you
Sandro
- This reply was modified 5 years, 5 months ago by coolicious.
June 17, 2019 at 6:29 pm #1111093

Basilis
Inactive Moderator

Hi,

What solution do you need exactly – could you please explain us?
It might be a little bit difficult as it would require CSS and as we cant see we cant help.

Best regards,
Basilis

June 17, 2019 at 6:43 pm #1111115

coolicious
Participant

Sure!

If you see the screenshot at my first post? This screenshot is my design mockup which shows you that I want to have a opened search box right to my main menu. I can do the CSS for the styling but I need information how I can change the current search box solution into a search box with is always open at the right side of my main menu.

Do you know now what I mean?

Best regards
Sandro

June 18, 2019 at 1:06 am #1111185

coolicious
Participant

And: You dont need to see my demo website, which is impossible also, you only give me a solution for this demo-template which I use:

Home

June 18, 2019 at 5:43 pm #1111379
Victoria
Inactive Moderator
Hi coolicious,

Please refer to this thread for a possible solution.

Best regards,
Victoria
- This reply was modified 5 years, 5 months ago by Victoria.
June 18, 2019 at 7:07 pm #1111427

coolicious
Participant

With the solution on this thread which is linked in your linked thread:
https://kriesi.at/support/topic/adding-search-bar-to-header-cant-find-enfoldincludes-folder/#post-476685

It looks like this on my stage version:

Two wrong things with this solution, maybe you have fixes for me?
#1 It doesnt replace the current “pop up-searchbox” (look at the magnifying glass at the right side of the main menu)
#2 The added search box isnt in the main menu div – it was integrated right after the “header_main”-div which you can see in the screenshot. I need it at the right side of my main menu which shows you the screenshot in my first post.

Can you help me?

June 20, 2019 at 2:41 pm #1111959

coolicious
Participant

So guys, I published my local stage version on an online stage version.
You can see my problem now on this website (look at the private infos)

I hope you can help me now :)

June 20, 2019 at 5:25 pm #1112001
Victoria
Inactive Moderator
Hi coolicious,

There is really no room for the form near the menu on screens below 1900px.
You can try using this code:
```
@media only screen and (min-width: 1900px) {
  .custom-form {
    position: absolute;
    right: 300px;
    top: 290px;
 }
}
```
Best regards,
Victoria
June 20, 2019 at 6:24 pm #1112030
coolicious
Participant
Thank you Vic,

but do you have a responsive solution for me and for the following problems?

Two wrong things with this solution, maybe you have fixes for me?
#1 It doesnt replace the current “pop up-searchbox” (look at the magnifying glass at the right side of the main menu)
#2 The added search box isnt in the main menu div – it was integrated right after the “header_main”-div. I need it at the right side of my main menu which shows you the screenshot in my first post.

Thank you!
- This reply was modified 5 years, 5 months ago by coolicious.
June 21, 2019 at 8:53 pm #1112414

Victoria
Inactive Moderator

Hi coolicious,

You need to uncheck the option to add search to the menu in the theme options. Yes, the widget will not be in the same container as the menu.

Best regards,
Victoria

June 23, 2019 at 12:47 pm #1112702
coolicious
Participant
Hey Victoria,

thank you for your support but this solution isnt enough for me because this is not responsive anymore. I will search a solution myself. Can you just say to me in which file I can find this line of code? This would help me:
```
<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
							<a href="?s=" rel="nofollow" data-avia-search-tooltip="

<form action=&quot;https://stage-200619.bathely.de/&quot; id=&quot;searchform&quot; method=&quot;get&quot; class=&quot;&quot;>
	<div>
		<input type=&quot;submit&quot; value=&quot;&quot; id=&quot;searchsubmit&quot; class=&quot;button avia-font-entypo-fontello&quot; />
		<input type=&quot;text&quot; id=&quot;s&quot; name=&quot;s&quot; value=&quot;&quot; placeholder='Suche' />
			</div>
</form>" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"><span class="avia_hidden_link_text">Suche</span></a>
	        		   </li>
```
Thank you!
Sandro
June 23, 2019 at 7:04 pm #1112728
Mike
Moderator
Hi,
Perhaps this solution will work for you, this function adds the search bar to the menu and the css hides the ajax search icon.
Try adding this code to the end of your functions.php file in Appearance > Editor:
```
add_filter( 'wp_nav_menu_items', 'avia_append_search_side_nav', 10, 2 );
function avia_append_search_side_nav( $items, $args )
{
	if (is_object($args) && $args->theme_location == 'avia')
	{
		global $avia_config;
		ob_start();
		get_search_form();
		$form = ob_get_clean();

		$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown">'.$form.' </li>';
	}
	return $items;
}
```
then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
#top .menu-item #searchform {
    top: 26px;
    position: relative;
}

#top #searchform > div {
    opacity: 1 !important;
    display: block !important;
}
#menu-item-search.menu-item-avia-special {
display: none !important;
}
```
This is the result I got on my localhost:

To answer your question, the code above can be found at line 134 in functions-enfold.php

Best regards,
Mike
June 23, 2019 at 7:19 pm #1112729

coolicious
Participant

Mike, THANK YOU!

That is what I want :))) Nice :)

June 23, 2019 at 8:36 pm #1112743

Mike
Moderator

Hi,
Glad to hear, I assume we can close this now, but I like to ask first. Shall we close this then?

Best regards,
Mike

June 23, 2019 at 9:34 pm #1112760

coolicious
Participant

Yes you can close it :)

June 23, 2019 at 9:49 pm #1112761

Mike
Moderator

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts