Search widget no longer working correctly since update to Enfold 7 - Support

Tagged: search icon, search widget

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

Author

Posts
March 12, 2025 at 3:40 pm #1479172

GWS
Participant

We are having trouble with search icons displaying correctly since updating to the Enfold 7. I found the article on the SVG search icon, https://kriesi.at/support/topic/svg-search-icon-in-top-menu-after-update-enfold-7/ and that helped with the issue we were having with the icon ‘disappearing’ from the nav bar. However, we have a search widget area on the home page of the website that is no longer displaying correctly. The custom search icon (a .png) is no longer showing and has been automatically replaced by the SVG icon. That icon is now floating off to the right and is completely out of place in the widget area. I’ve attached a link to a screenshot of what it is supposed to look like and the website URL is in the private content as well. Your advice is appreciated. Thank you.

March 12, 2025 at 3:44 pm #1479173

GWS
Participant

And I just realized the search icon on the nav menu while now showing is not displaying the search box when selected. Can you check on that as well?

March 12, 2025 at 3:48 pm #1479174

GWS
Participant

Actually, the search icon is working but it is a little off to the left of the clickable area. So if a user clicks directly on top of the search icon, nothing happens. You have to click a little to the right of it. Again, this is on the search icon on the nav menu. The other search issue is the widget box under the home page slider. Sorry for so many replies.

March 13, 2025 at 1:09 pm #1479243

Rikard
Keymaster

Hi,

Could you try updating the theme to the latest version (7.1) to see if that helps please? https://kriesi.at/documentation/enfold/theme-update/.

Best regards,
Rikard

March 13, 2025 at 3:58 pm #1479266

GWS
Participant

The theme has been updated to 7.1 but the problem still persists. Any other suggestions?

March 18, 2025 at 2:49 am #1479592
Ismael
Moderator
Hi,

Thank you for the update.

The custom content widget is covering the search icon. Please add this css code to adjust the height of the custom content widget.
```
#header_main_alternate .custom_content {
    max-height: 140px;
}
```
Best regards,
Ismael
March 21, 2025 at 8:43 pm #1479882

GWS
Participant

Ismael,
Thank you for your reply, but the custom_content on the navigation bar is not the problem. It is a different area of the website (below the home page banner slider), which is using the css #searchsubmit and is not rendering correctly since the 7.0/7.1 version updates.

I’ve pasted a link to a screenshot of the search box we are having trouble with as it looks now. The standard search icon is out of position all the way to the right and the SVG search icon we are using that is no longer displaying.

How can we get the custom SVG search icon to display again to the left of the search box, and the ‘search’ word label to display again?

March 24, 2025 at 6:23 am #1480015
Ismael
Moderator
Hi,

Thank you for the clarification.

Please remove the previous css modifications applied to the search input, then replace them with the following code:
```
#top #chsearchbox #searchsubmit, #chsearchbox .ajax_load {
    width: 62px;
    height: 100%;
    line-height: 40px;
    padding: 0;
    position: absolute;
    right: auto;
    top: 0;
    z-index: 2;
    margin: 0;
    border-radius: 0;
    min-width: 40px;
    left: 0;
    background: url('https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#chsearchbox #searchform .av_searchform_search.avia-svg-icon {
    display: none;
}

#chsearchbox #search-3 #s {
    left: 35px;
    content: none;
    width: 85%;
    margin: -32px auto !important;
    padding: 41px;
    border: none!important;
    box-shadow: 0px 5px 15px 0px #cccccc;
    margin-left: 0 !important;
}
```
The search bar should look like this after applying the modification:

View post on imgur.com

Best regards,
Ismael
March 24, 2025 at 6:05 pm #1480060

GWS
Participant

Ismael,
Thank you for the CSS advice. That works great for the home page search widget below the layerslider. However, it also applies to the avia menu search bar icon. I don’t mind that the SVG default icon isn’t there, but when I try to move the search icon to the left of the search box it affects the search widget on the home page. I’ve included a link to a screenshot of the search icon in the nav bar and how it is displayed in the text input area. If we change it then it affects the search widget icon further down on the home page. Can you advise on how to adjust the nav menu search box so the icon is to the left of the input field, but without affecting the search widget further down on the home page? We had it working separately before this issue arose. Thanks.

March 25, 2025 at 5:38 am #1480094

Ismael
Moderator

Hi,

We adjusted the selector in the css rules a bit so they don’t affect the default search bar. Please try it again.

Best regards,
Ismael

April 18, 2025 at 9:25 pm #1481610

Maspelin
Participant

I have the same issue. On my marketing website where the search icon/nav menu is over a photo, I can see the icon. But on my real estate website the menu bar is black and there’s a spot for the search icon, but it is not visible. Both are using Enfold version 7.1. I have other sites with nav menu bars where you cannot see the search icon. Yes, under Enfold, Main Menu I HAVE checked the box to APEND Search Icon to Main Menu. On all my sites.
Author

Posts

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

You must be logged in to reply to this topic.