The quickest way to achieve what you want is import and edit the default header.
It looks like this on desktop and laptop screens.
Like this on tablet.
And this on mobile.
You can also learn from that setup. Just delete the container containing the social media icons.
You need to make the menu disappear earlier by setting the Hide During Breakpoints laptop view.
Alternatively, and/or in addition to that, you can set your Image to scale and lower your Bar's height. If you do that, it might be possible that you skip hiding the menu I instructed earlier.
Add the Navigation Collapsed element inside the container containing your Navigation Inline and hide it on desktops. Once your Navigation Inline disappears (using the option I stated earlier), your Navigation Collapsed will be shown.
For more tutorials and tips and tricks, please visit our Knowledge Base.