Keep Mobile Menu on Desktop
A user friendly site is a crucial part of a good user experience, which will keep visitors on your site longer and help improve your Search Engine Optimization. If you have a lot of items in your navigation, it can be distracting to have them listed across the top of your site on desktop. It can also make it difficult for users to find what they need.
In this video, I show you how to hide the desktop navigation and force the mobile menu to show instead.
The following code is used in the video.
/* Mobile Menu on Desktop */
.header-nav, .header-actions{
display: none;
}
.header-burger, .header-menu {
display: flex;
}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}