I would like to hide menu on desktop but still have it visible on small screen

Yes, you can do that using a media query. If you don’t mind I suggest you to use media query simple.

The exact query will depend on your site structure and how the menu is identified in your code. Before you do that, make sure your navigation will not be hidden as well; most website navigation is within the header of the site.

Please try adding the following CSS code in the style.css file of your theme.

//Set by given example theme link (http://www.template-joomspirit.com/theme-wordpress/theme-01/)

/*This CSS code apply while screen resolution is less OR 480 px only, you can change min-width value as per your requirement*/
@media screen and (max-width: 480px){
    .drop-down span.title_menu {//For menu button, Class set for example only, Please change it with your requirement...
        display: none !important;
    }

    .drop-down ul {//For Navidation, Class set for example only, Please change it with your requirement...
        display: block !important;
    }
}

OR if your theme doesn’t have custom CSS tab add it in your site using the Simple Custom CSS plugin. This plugin is designed to meet the needs of administrators who would like to add their own CSS to their WordPress website.

This should remove the menu on resolutions smaller then 480px.

Here’s some information about media queries that should help:

CSS TRICKS – Media Queries for Standard Devices

CSS TRICKS – Logic in Media Queries

Using media queries

Use CSS media queries for responsiveness

Hope this helps. Let me know if there is any query/doubts from this.