Expandable search box in main menu

I followed the instructions in this thread

https://forums.athemes.com/t/how-to-add-search-to-sites-main-menu/32609

and was able to get the search box in the main menu. However, the box is constantly visible instead of just showing the magnifying glass icon and expanding when hovered over or clicked. I like the expandable box and don’t know how to get it to work properly.

thanks

Hello there,

Please share a link to your site here, to let me inspect it directly.

If your site has an active caching, you should had to flush it first before reloading your site. Otherwise, new code addition won’t take any result.

Regards,
Kharis

https://birddoglogic.com/

I haven’t made any further changes since uploading the code from the other thread. I flushed the cache and the search box appeared but won’t expand/collapse.

thanks Kharis-

Hello there,

Try adding this CSS code:

    .top-search-menu input {
      width: 26px;
      opacity: 0;
    }

    .top-search-menu.input-expanded input{ 
      width: 160px;
      opacity: 1;
    }

Regards,
Kharis

that worked, thanks Kharis-

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis