Adding a Text/Image logo to Menu bar that shows only on mobile

Hi,

I checked several related topics but couldn’t find the exact solution.

I want to show a text or image logo in menu/navigation bar at top (between search & menu icon in center) when viewing the site on mobile. The bigger logo in header should then hide on mobile but continue to show on desktop (screen resolution above 800px).

Example image: https://i.imgur.com/cCiEUsq.png and site: https://www.nextbigwhat.com/

Please suggest a way to do it.

Test site: https://test.webtrickz.com/

Thanks in advance.