In Genesis Facebook group a user asks:
Hi Everyone,
Using Genesis Sample child theme and I want to always display the mobile navigational menu – even on desktop. I’m having a hard time finding a tutorial for that. Thanks!
And the answer is to simply remove the relevant CSS in the 960px min-width media query.
Tested in Genesis Sample 2.6.0.
In style.css scroll down to 960px min-width media query.
Delete the following (lines 1449 to 1530):
/* Genesis Menu
--------------------------------------------- */
.genesis-nav-menu .menu-item {
display: inline-block;
}
.genesis-nav-menu .menu-item:focus,
.genesis-nav-menu .menu-item:hover {
position: relative;
}
.genesis-nav-menu > .menu-bold > a {
font-weight: 700;
}
.genesis-nav-menu > .menu-highlight > a {
background-color: #333;
border-radius: 3px;
color: #fff;
font-weight: 600;
margin-left: 15px;
padding-left: 20px;
padding-right: 20px;
}
.genesis-nav-menu > .menu-highlight > a:hover,
.genesis-nav-menu > .menu-highlight > a:focus {
background-color: #0073e5;
}
.genesis-responsive-menu .genesis-nav-menu .sub-menu,
.genesis-responsive-menu .genesis-nav-menu .sub-menu a {
width: 180px;
}
.genesis-nav-menu .sub-menu {
border-top: 1px solid #eee;
opacity: 0;
padding-left: 0;
position: absolute;
transition: opacity .4s ease-in-out;
}
.genesis-nav-menu .sub-menu a {
border: 1px solid #eee;
border-top: 0;
padding-bottom: 15px;
padding-top: 15px;
}
.genesis-nav-menu .sub-menu .sub-menu {
margin: -46px 0 0 179px;
}
/* Responsive Menu
--------------------------------------------- */
.genesis-responsive-menu {
display: block;
padding-top: 15px;
}
.menu-toggle,
.sub-menu-toggle {
display: none;
visibility: hidden;
}
/* Header Menu
--------------------------------------------- */
.nav-primary {
clear: none;
float: right;
width: auto;
}
.nav-primary .genesis-nav-menu a {
padding-left: 15px;
padding-right: 15px;
}