Search icon not displaying on mobile - Support | Kriesi.at

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

Author

Posts
October 22, 2025 at 10:33 pm #1490516
AmyEdwards
Participant
I’m having trouble with getting the search icon to appear on mobile. I want it to appear to the left of the logo on the mobile. How do I get this visible?
- This topic was modified 3 weeks, 1 day ago by AmyEdwards.
October 23, 2025 at 7:19 am #1490525
Ismael
Moderator
Hey AmyEdwards,

Thank you for the inquiry.

You can add the following css code to display the account and search icons on mobile view, but you’ll need additional style adjustments for the search field since you’re using a custom search option. We recommend reaching out to the script or plugin authors for additional assistance.
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */

  #top #header .av-main-nav>#menu-item-wc-account-icon {
    display: block !important;
  }

  #top #header .av-main-nav>.menu-item.menu-item-search-dropdown {
    display: block !important;
  }
}
```
Best regards,
Ismael
October 23, 2025 at 9:58 am #1490535

AmyEdwards
Participant

Hi Ismael,

That css doesn’t seem to work. I had injected custom code into the function.php file to get the search bar to appear above the mobile menu but I’m looking for the icon to appear in the header, I’ve removed the custom code to ensure there’s no conflicts but it’s still not working. The plugin used is Fibosearch which is set up to use Enfold’s search bars which works great on desktop but I can’t get the default one to appear on mobile. I’ve had this problem previously with other sites and have had to use custom code but I need the Enfold default one to be visible here because of Fibosearch. I have tried to add their shortcode to the top bar but it really messes with the styling of the layout, it would be much better to have the icon in the space to the left of the logo.

October 23, 2025 at 3:58 pm #1490546
Rikard
Keymaster
Hi,

This CSS is hiding it:
```
@media only screen and (max-width: 1295px) {
  #top #header .av-main-nav > li.menu-item {
    display: none !important;
  }
}
```
Maybe you have added it under Appearance->Customise?

Best regards,
Rikard
October 23, 2025 at 4:42 pm #1490547

AmyEdwards
Participant

Hi, this css is not in the customise section nor in the quick css editor. where do I find it to remove it? I have removed any css which could possible affect the header on a mobile.

October 24, 2025 at 6:57 am #1490559

Ismael
Moderator

Hi,

Thank you for the update.

Where did you place the css code? We are not seeing the modifications in the document, but we can see that the following css rule is preventing the main menu from displaying on mobile view. You need to place the css we suggested below that rule.

For the style adjustments of the custom search, please contact the plugin developers.

Best regards,
Ismael

October 26, 2025 at 1:18 am #1490596

Jason
Participant

Hello, I have a similar problem where the search icon is not showing on my mobile page. Under the “Main Menu” on my child theme, I have the switch on for “if enabled a search icon will be appended to the main menu that allows the user to perform an “AJAX” search.”

There is a mention that this will only be available when the “General Layout > Logo And Main Menu > Top Header” option is selected.

When I go to the above “General Layout” I have it set to “Left Sidebar” so not sure if this is the reason on the mobile, it is not showing at the top? On the desktop site I have the search as in the same “General Layout” there is an option for the “Main Menu Sidebar” and this is set to “Search”.

I am not using any special search tool and as I said on the Desktop version, it works correctly, just not on mobile.

October 27, 2025 at 7:31 am #1490615
Guenni007
Participant
@ismael – i guess that this rule belongs to the ruleset that should show the burger menu on larger screens than the settings of 768px or 990px :
```
@media only screen and (max-width: 1295px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}
```
so i guess that amyedwards misses the icon in between that 990px and her 1295px
try:
```
@media only screen and (max-width: 1285px) {
  .responsive #top  .av-main-nav #menu-item-search.menu-item-avia-special {
    display: block;
  }
}
```
October 27, 2025 at 7:32 am #1490616

Ismael
Moderator

Hi,

@Jason: As mentioned in the previous thread, the search icon only works for the Top Header. It is disabled by default for the left and right sidebar/header layouts. If you need the search icon to display, you’ll have to modify the avia_append_search_nav function in the enfold/includes/config-enfold/functions-enfold.php file.

Best regards,
Ismael

October 27, 2025 at 8:26 am #1490617

Jason
Participant

Dear Ismael,
Thank you for the reply. I thought the search icon used to be on my mobile site just next to the hamburger menu, so that is confusing to me…

I have it working fine on the left side of the desktop, but not on mobile… Can you give me any more directions on this?

October 28, 2025 at 6:35 am #1490644

Ismael
Moderator

Hi,

@Jason: You have probably enabled the Top Header before. If you really need to keep the left sidebar or header and still include a search field on the page for mobile view, you can try adding a Search element from the Advanced Layout Builder.

Please open another thread if you have more questions.

Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.