Move navigations into header part and do not disturb the responsive mobile screen

My original theme screen is like this

But I want in this way

But due to these changes, my responsive view gets distorted like this.

I wrote this line of code in the default.xml file <move element="catalog.topnav" destination="header-wrapper" after="logo" />

Any help would be appreciated. Thanks