Show a default search field instead of search icon

Hi Mike

The following seems like the easiest method.

1-
I turned off Append Search Icon To Main Menu in the Enfold Theme Options.

2-
WooCommerce -> FiboSearch -> Starting.
Turned off the Search bars to replace Enfold with the FidoSearch.

3-
Added the Custom Link FiboSearch bar to the menu her.
Used Layout: Default. Menu Style: Default.

Results. Search field or Search icon can for a very short moment be seen to the left of the top menu here. Just to the left of the Hjem / Home menu item.
https://labhuset.no/

I do not know what is going on there.

Thank you for your help Mike! I sent a message to FiboSearch and was told the following.

– Make sure that Enfold Theme Options -> Main Menu -> Append Search Icon To Main Menu (is toggled off).

– FidoSearch bar is added through Appearance -> Menus. To the location it is to be in.
(Menu item options be sure to have Layout: Search bar selected.)

– WooCommerce -> FiboSearch -> Starting tab. Make sure that Search bars Replace them is not checked. As this is not meant to replace the Enfold search, but to replace it.

– WooCommerce -> FiboSearch -> Search bar. I clicked to use the Show submit button. I also used the style Solaris. Use layout Search bar.

FiboSearch support gave me the following CSS. I added some additional code.

/* Fra Fibiosearch  support 9 nov 2023. */
/* Overriding default Enfold code. */
.menu-item .dgwt-wcas-search-wrapp {
  opacity: 1 !important;
  display: block !important;
}

.dgwt-wcas-search-input {
  margin-bottom: 0 !important;
}

.menu-item .dgwt-wcas-search-form {
  margin-bottom: 0 !important;
}

/* Search field. */
#menu-item-3327 {
  height: 90px;
  display: flex;
  align-items: center;
}

/* Search field. 6 nov Joachim. */
#top .header_color .input-text, #top .header_color input[type='text'], #top .header_color input[type='input'], #top .header_color input[type='password'], #top .header_color input[type='email'], #top .header_color input[type='number'], #top .header_color input[type='url'], #top .header_color input[type='tel'], #top .header_color input[type='search'], #top .header_color textarea, #top .header_color select {
    border: 1px solid lightgrey;
    background: white;
}

/* Search button. 6 Nov Joachim. */
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit, .dgwt-wcas-om-bar .dgwt-wcas-om-return {
    background-color: #f7f7f7;
    color: #0f0f0f;
    border-top: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}

I added so much detail so that others whom might come across this thread might also want to try out FiboSearch.
The result is seen here: https://labhuset.no/

The site is slow to show results so that is something I will need to look into.

Hey Mike

I added a gear icon to show the user that something is going on. As it seems one needs to wait a little before results show up.
I mentioned the slowness of the search area for FidoSearch support so I will see what they say. It might be something I can share here. So let’s wait a few days with closing the thread.

Hi

Thank you for leaving the thread open.

The whole process stopped up with FiboSearch. As I forgot to reply to their message when trying to figure out why the search was slow.

I have added FiboSearch to another site: https://industrihuset.no/
I transferred the same settings from the first site to the second site, but either I forgot something to transfer over or I have to add additional CSS to Enfold as the search bar is there for a second before it disappears perhaps behind the menu. I also will need to move the search bar down to align it with the rest of the menu.

Do you have some advice on this? Thank you.

Hey Mike

I need to circle back to not using any code here. To figure out the bottom line issue happening. Fibo Search should be seen but it is not.
In a not logged in browser window. Upon loading the screen the Fibo Search box is seen for a moment before I noticed a kind of white area cover the everything to the left of the menu. (Seen in the Brave and Firefox browser not logged inn.)

From this it looks like the Fibo Search is not a part of the menu. Even though it is added through the menu.

Why is Enfold covering up Fibo Search and how can we handle this in a simple way?