Enfold: Removing the search magnifying glass and adding in the search field - Support

Tagged: ajax search, header, magnifying glass, search, search box

Viewing 30 posts - 1 through 30 (of 33 total)

1 2 →

Author

Posts
June 11, 2014 at 10:00 pm #277734

jnhaswell
Participant

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

June 13, 2014 at 5:41 am #278483
Ismael
Moderator
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
June 16, 2014 at 5:49 pm #279586

jnhaswell
Participant

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

June 16, 2014 at 6:09 pm #279606

jnhaswell
Participant

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’);

June 17, 2014 at 3:05 am #279800
Ismael
Moderator
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
January 26, 2015 at 2:31 pm #385435

huttonpeach
Participant

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?

January 26, 2015 at 2:32 pm #385436

huttonpeach
Participant

This reply has been marked as private.

January 27, 2015 at 7:55 am #386014

Ismael
Moderator

Hey!

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

Cheers!
Ismael

June 3, 2015 at 4:49 pm #453930

ind-image
Participant

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

June 3, 2015 at 4:57 pm #453934
ind-image
Participant
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
June 4, 2015 at 8:08 am #454279

Rikard
Keymaster

Hi!

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

Glad you got it fixed.

Best regards,
Rikard

June 17, 2015 at 6:08 pm #460897

AscenderDesign
Participant

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

June 18, 2015 at 8:28 am #461154

Rikard
Keymaster

Hey!

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

Regards,
Rikard

June 19, 2015 at 5:52 pm #462078

AscenderDesign
Participant

This reply has been marked as private.

June 21, 2015 at 10:28 am #462304
Ismael
Moderator
Hi!

What happens when you add this in the Quick CSS field?
```
#menu-item-search {
  right: -50px !important;
}
```
Let us know.

Best regards,
Ismael
January 29, 2016 at 9:43 pm #574810

vcameron
Participant

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

February 1, 2016 at 9:48 pm #576024

Vinay
Inactive Moderator

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

February 9, 2016 at 7:42 pm #580530

ENBertussi
Participant

Hi Team and @ismael,

is this solution ( https://kriesi.at/support/topic/enfold-removing-the-search-magnifying-glass-and-adding-in-the-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.

February 11, 2016 at 8:35 am #581488
Ismael
Moderator
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();
				get_search_form(false);
				$getform = ob_get_clean();
        $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 #menu-item-search #searchform div {
  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
September 12, 2016 at 2:54 pm #685165

iedigitaldesign
Participant

I’ve made the changes to the function.php and the Quick CSS as stated in the very first reply (Ismael). It worked, however, now the search bar and the search icon are not aligned.

September 17, 2016 at 2:45 am #687791

Vinay
Inactive Moderator

Hi,

Sorry for the late reply, did you figure this one out? The search bar and the icon look good on my end. If you still have any issue with the alignment please share a mockup of the same and the browser details so we can further help you :)

Best regards,
Vinay

September 21, 2016 at 4:45 pm #689919

robertdizdarevic
Participant

Dear Ismael,
i am trying to edit the sarch box in Enfold and have it full width. Through the forum i found a lot of tips but now i would like to have the content in search box centered, which i just can´t figure out. Could you help?
I posted a private link to my site.
Could you have a look please?

Regards
Robert

September 23, 2016 at 3:29 pm #690831

Vinay
Inactive Moderator

Hi,

Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

However we would still love to help! please post a mockup or a screenshot of the end result you are looking for so we can try our best to help you achieve it. You can upload the mockup to imgur.com and share the link here :)

Best regards,
Vinay

October 26, 2016 at 3:09 pm #704336

kylebarnick
Participant

I got the search menu to show, but how do I make it full width of the main menu. I am trying to make a similar feel to the amazon header.

October 26, 2016 at 3:18 pm #704342

Yigit
Keymaster

Hey!

@kylebarnick Can you please post the link to your website? :)

Cheers!
Yigit

October 26, 2016 at 4:42 pm #704415

kylebarnick
Participant

client.kylebarnick.com/demoroom

October 26, 2016 at 4:44 pm #704417

Yigit
Keymaster

Hi!

I am getting “Internal Server Error” when i try to load your site.
Can you please start a new thread and attach temporary admin logins in private content field after your hosting provider fixes the issues so we can look into it?
If you post your credentials here, they will be visible to creator of this thread as well.

Regards,
Yigit

January 4, 2017 at 6:56 pm #729577
ENBertussi
Participant
Hey there,

I am following https://kriesi.at/support/topic/enfold-removing-the-search-magnifying-glass-and-adding-in-the-search-field/#post-278483

I only have a problem now where the ajax preview of the search items is on an invisible background. can you let me know how I can specify the background colour? see https://braandcorsetsupplies.com/ and put min 3 charachters into the search on the header and you will see the results are on an invisible background so you can’t see them on top of page content.

I think i have to do something with specifying the background of the [ class=”ajax_search_response” ]

cheers and as always thanks so much for all your help with these projects :)

ENB..//
- This reply was modified 7 years, 10 months ago by ENBertussi. Reason: added more details.. :)
January 6, 2017 at 1:13 pm #730314

Andy
Inactive Moderator

@PRuuPH
Please open your very own ticket about this. Your request has nothing to do with the thread’s topic.

Best regards,
Andy

April 6, 2017 at 1:19 pm #773162

dwebprojects
Participant

How to do this, with normal search box, i would like to disable ajax.

Ty,

d.
Author

Posts