Hey there,
Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it.
The following code worked for me on my site: http://mattehue.com :
@media screen and (min-width: 1px) {
.header-layout-nav-right .header-nav-list {
display: none;
}
.header-burger {
display:flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}
You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible.