Force iPad Horizontal to Mobile Navigation

Design help Custom code
1

I am having trouble getting the code I add to the head to make people see the mobile navigation when viewing on an iPad in landscape view. I’m sure I just have the code wrong.

I have tried this code

<style>
	@media (max-width: 1024px) {

	#desktop-nav-top {display: none;}
  	#desktop-nav {display: none;}
	#mobile-nav {display: block}

}
</style>

and

<style>
    @media screen and (max-width: 1024px) {
    .w-nav[data-collapse="medium"] .w-nav-menu {
        display: none;
    }

    .w-nav[data-collapse="medium"] .w-nav-button {
        display: block;
    }
}
</style>

Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Should I change the title of the question to say “help with media queries?”

Just wondering if I am asking the right question.