Remove desktop navigation bar, keep it in mobile

Hi, I used CSS to remove the header and footer sections of my site in desktop in order to create my own. I would like to keep the nav bar in mobile in order to have my logo and hamburger icon up top. My code removed the nav bars from both. Is there a way to retrieve the mobile? Thank you. 

@katamb Hi! Can you share your site URL for context? 

It’s in development mode and private. Basically I would like to maintain the hamburger menu for mobile, while making my nav bar in desktop look like this website’s: https://www.yeswearemadarts.com

I figured I would create my own in desktop since designing the Squarespace built in nav bar is limited. 

I made it public, Katabaez.com. I’d like to make the nav bar look like the design underneath while maintaining the mobile nav bar which I hope to keep the same. Thanks!

@katamb Hi! You can add this code to hide the header on desktop and display it only on mobile:

@media screen and (min-width: 1025px) {
	#header {
		display: none !important;
	}
}

The header design you have underneath the actual header can be created using Squarespace's header with custom code. This approach would require much less code and be easier to edit and update compared to the current method you're using.

Thank you so much, worked like a charm! Would you happen to have the custom codes to make the desktop look header look like that? 

@katamb I don't have the custom codes, but I can write the code solution to achieve your header design on desktop and share it with you.

That would be great, I’d really appreciate it! 🙏

16 minutes ago, katamb said:

That would be great, I’d really appreciate it! 🙏

Sure thing! I'll share the solution shortly.

looking forward to it thanks again!

I was working on the code; Site is showing private now 🙂. You can publish the site with a sitewide password.