Search Icon missing in horizontal menu

Hey,

you’re right – when I remove the code the search icon comes back. But then it’s also visible in the mobile version where I don’t want to show it. (see screenshot)
Is there any way to only have the search icon in the desktop version and remove it for the mobile one?
Some time ago it worked like this with the code that now also prevents the icon to show on desktop.

Best regards,
Jamie

Hi Rikard,

your code works for the search icon.
But on the top of the page I now have a grey area plus my header doesn’t move anymore (meaning it stays fixed). I attached two screenshots where you can see the issue – grey area and staying header
What can I do so that the page’s layout isn’t broken when the search icon is shown in desktop but not in mobile view?

For now I went back to the code where the search icon is also shown in the mobile version.

Best regards,
Jamie

• This reply was modified 6 years, 1 month ago by ping-pong.

Hi,
I cleared the cache and reloaded the page. Both results happen also when I use Chrome instead of my default browser Firefox. I changed the code back to the one that functions, so perhaps that’s why you couldn’t reproduce either of the results?

Now in my Quick CSS there is

/* MOBILE  */
#mobile-advanced, .av-burger-menu-main {display: none !important; }

/* NOT WORKING CORRECTLY
@media only screen and (max-width: 767px) {
#menu-item-search, .av-burger-menu-main {
    display: none !important;
}
} */

It works but the search icon is shown in mobile version.
When commenting out the first code block and activating the second, the search icons are shown correctly (meaning it’s shown in desktop version but not on mobile) but the issue from the earlier screenshots happen.

Best regards,
Jamie

• This reply was modified 6 years, 1 month ago by ping-pong.

Hi,
right now that’s exactly what I see too. But in the mobile view (or when you reduce the size of the browser window) then there’s the search icon visible what shouldn’t be there.
As soon as I use the code you provided, the search icon disappears but then there’s this grey bar and the header is fixed (as shown on the last two screenshots I’ve send you).

Best regards,
Jamie

Hi Rikard,
now it looks as it should – thank you very much! :)
Best regards.