Search icon not showing on mobile sticky header

Here is my site

So when I view the site in mobile, and click the search icon of normal header in mobile menu, the search overlay shows up properly. However the problem appears when I open flyout navigation of sticky header and click the search icon of the sticky header, the search overlay does not show up.

The issue is illustrated in this video link below.

I did not open your movie, since I have a policy of not doing so.

In mobile, I can click on the search icon in the upper right successfully. I can click on the hamburger (more) menu and the menu expands successfully. There is no search in that menu at all. The expanded menu does cover the search, however. Is that what you are worried about? If so, it should not be a worry, since both hamburger icon and search icon are easily viewable in the uncluttered header. So when they click on the hamburger icon, they are not trying to search for something.

If I described something different than what you intended, please use my post to clarify.

1 Like

The problem is not with opening search icon on normal header. To view the problem, please scroll below, then the sticky header will show up, on the sticky header first click the hamburger icon, the mobile menu will show up. Then try to click the search icon, unfortunately the search overlay does not show up.

I looked at this yesterday and I could see that once you scrolled down the page and the new sticky header showed up then when you clicked the search icon the search form did not appear. (I can’t remember if that was after clicking the hamburger and closing or not).

However, I have looked today and it seems you have changed the page as the top header is very deep on mobile and small screen and there is no search form at all appearing even before scrolling. Looking at the html you have two versions of the header which you have labelled as one for desktop and one for mobile and in the mobile version there is no actual search form at all.

I assume you are in the middle of testing so there is nothing I can suggest as the search form simply is not present. Once you have implemented it you will need to make sure the js knows there are two versions of it. Indeed it seems you are cloning the header for the sticky when scrolled version so I guess you may actually have 4 different headers.

That is way too complicated to debug especially when you really only need one header for desktop , mobile and sticky. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.